简答：数据URI限制有所不同。

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年多前提出的，现在大多数都是因为过时而不正确，但这个问题位于谷歌搜索结果的顶部，数据是限制＆＃34;。数据URI现在是widely supported，IE 7/8不再是相关的浏览器。下面有很多参考文献，因为答案在今天很细致。

数据URI限制

数据URI规范没有定义大小限制，但表示应用程序可能会强加自己的。

Chrome - 当前文档的2MB。否则，限制是任意blob的内存存储限制：如果是x64而不是ChromeOS或Android，则为2GB;否则，total_physical_memory / 5（source）。
Firefox - unlimited
IE≥9＆amp;边缘 - 4GB
Safari＆amp;移动Safari - ？

替代

higher limit (500MiB in Chrome)可能替代您的用例的一种技术是通过URL.createObjectURL()通过URL API使用File API和blob的Blob网址。 Using URL.createObjectURL()中提供了一个示例。

How to write a file / give it to the user中提到的一些其他选择包括：FileSaver.js，StreamSaver.js和JSZip。

您可以使用Modernizr检测对data URIs over 32kb的支持。

相关问题

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

getting max Data-Uri size in Javascript
“Aw, Snap” when data uri is too large
What is the size limit of a Base64 DataURL image?
What is the maximum length of a URL in different browsers?这个问题是关于网址，而不是数据URI，但有关于数据URI的相关答案和评论。
Is it possible to programmatically detect size limit for data url?

Answer 2

我刚刚快速检查了8种不同的Jpeg图像，其大小从3,844到 2,233,076字节。

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

Chromium 14.0.816.0
Firefox 11.0
Google Chrome 18.0.1025.142
Internet Explorer 9.0.5（64位）
Opera 11.62
Safari 5.1.5

Answer 3

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

“data：”URL方案仅有用对于短期值。请注意一些使用URL的应用程序可能会强加长度限制;例如，URL 嵌入在HTML中的<A>个锚点中有一个长度限制由 HTML的SGML声明[RFC1866]。 LITLEN（1024）限制了数量可以出现在。中的字符单个属性值文字， ATTSPLEN（2100）限制所有的总和所有属性值的长度出现在标签中的规格，塔格伦（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

2017答案是：将数据转换为带有函数的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 url

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中的大文件

Answer 6

这真的是“data URI scheme”。

根据维基百科页面，IE7缺乏支持，IE8测试将其限制为32kB数据。

Answer 7

关于网络浏览器的限制，MSIE 6/7不支持数据网址方案...... 有关wikipedia

的更多信息

每个浏览器的长度限制是不同的 - 我相信IE8最多允许32KB，Opera是4KB，但不能真正讲述其他浏览器......

Answer 8

仅仅是一个FYI，我能够通过JavaScript ajax调用在Firefox 3.5中使用数据URL加载130K图像。它在IE 8中截断了图像，但整个事情都出现在FF中。

Answer 9

似乎Firefox 3.6中的限制为600KB。

Answer 10

我尝试了waza123的代码，但charCodeAt方法没有正确转换所有字符。这是我在浏览器中创建大量下载的解决方案。（我将它用于JSON数据）

function exportToFile(jsonData, fileName) {
    const u8arr = new TextEncoder('utf-8').encode(JSON.stringify(jsonData, null, 2));
    const url = window.URL.createObjectURL(new Blob([u8arr], { type: 'application/json' }));
    const element = document.createElement('a');
    element.setAttribute('href', url);
    element.setAttribute('download', fileName);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

Answer 11

注意：IE中还有一些其他限制。对于iframe，上限为4 kb。

在IE9中，删除了DataURI的32kb限制，尽管出于安全原因，它们的使用仍然仅限于某些上下文（特别是，禁止创建诸如IFRAMES之类的安全上下文的场景）

MSDN

数据协议URL大小限制

11 个答案:

简答：数据URI限制有所不同。

数据URI限制

替代

相关问题