数据协议URL大小限制

Question

"data:"URL方案值是否有任何大小限制？我对流行的网络浏览器的局限感兴趣.换句话说,多久可以data:image/jpg;base64,base64_encoded_data成为<img src="data:image/jpg;base64,base64_encoded_data" />或background-image: url(data:image/jpg;base64,base64_encoded_data)？

Answer 1

简答:数据URI限制有所不同.

有很多答案.由于问题是在5年多前提出的,现在大多数都是因为过时而不正确,但这个问题位于谷歌"数据uri限制"结果的顶部.数据URI现在得到广泛支持,IE 7/8不再是相关的浏览器.下面有很多参考文献,因为答案在今天是微妙的.

数据URI限制

数据URI规范没有定义大小限制,但是应用程序可能会强加自己的大小限制.

• Chrome - 当前文档为2MB.否则,限制是任意blob的内存存储限制:如果是x64而不是ChromeOS或Android,则为2GB; 否则,total_physical_memory / 5(来源).
• Firefox - 无限制
• IE≥9&Edge - 4GB
• Safari和Mobile Safari - ？

备择方案

一种具有更高限制的技术(Chrome中为500MiB)可能是您的用例的替代方案,Blob URL通过URL.createObjectURL()使用URL API和blob通过File API.使用URL.createObjectURL()中提供了一个示例.

如何编写文件/将其提供给用户中提到的一些其他替代方法是:FileSaver.js,StreamSaver.js和JSZip.

您可以使用Modernizr检测超过32kb的数据URI支持.

相关问题

这些答案与这个问题几乎相同,但我提到它们可以节省您阅读每个答案的时间.

• 在Javascript中获取最大数据Uri大小
• 数据uri太大时"Aw,Snap"
• Base64 DataURL图像的大小限制是多少？
• 不同浏览器中URL的最大长度是多少？这个问题是关于URL,而不是数据URI,但是有关于数据URI的相关答案和评论.
• 是否可以以编程方式检测数据URL的大小限制？

Answer 2

我刚刚快速检查了嵌入八个不同的Jpeg图像,大小从3,844到2,233,076字节不等.

所有以下浏览器都在我的Windows 7(64位)系统上正确显示每个图像:

• 铬14.0.816.0
• Firefox 11.0
• 谷歌浏览器18.0.1025.142
• Internet Explorer 9.0.5(64位)
• 歌剧11.62
• Safari 5.1.5

Answer 3

来自http://www.ietf.org/rfc/rfc2397.txt:

"data:"URL方案仅对短值有用.请注意,某些使用URL的应用程序可能会施加长度限制; 例如,嵌入<A>在HTML中的锚点中的URL 具有由HTML [RFC1866]的SGML声明确定的长度限制.LITLEN(1024)限制可出现在单个属性值文字中的字符数,ATTSPLEN(2100)限制出现在标签中的所有属性值规范的所有长度的总和,并且TAGLEN(2100)限制标签的总长度.

Answer 4

我已经读过Safari对数据URI的限制为128K:

http://blog.clawpaws.net/post/2007/07/16/Storing-iPhone-apps-locally-with-data-URLs#c1989348

Chrome是2M:

http://code.google.com/p/chromium/issues/detail?id=44820#c1

Answer 5

它实际上是“ 数据URI方案 ”。

根据Wikipedia页面，IE7缺乏支持，而IE8 Beta将其限制为32kB数据。

Answer 6

关于Web浏览器的限制,MSIE 6/7不支持数据URL方案...更多关于维基百科的信息

每个浏览器的长度限制是不同的 - 我相信IE8允许高达32KB,歌剧是4KB,但无法真正讲述其他浏览器......

Answer 7

2017年的答案是：将数据转换为具有功能的data Blob：dataURLtoBlob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

然后创建Blob网址

var temp_url = window.URL.createObjectURL(blob);

然后根据需要在新窗口中使用它。

var redirectWindow = window.open('');
redirectWindow.document.write('<iframe src="' + temp_url + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>')      

在chrome / firefox 2017中处理大文件