Html 数据协议 URL 大小限制

Data protocol URL size limitations

提问by LicenseQ

Is there any size limitation for "data:" URL scheme values? I'm interested in limitations in popular web browsers. In other words, how long can data:image/jpg;base64,base64_encoded_databe in <img src="data:image/jpg;base64,base64_encoded_data" />or background-image: url(data:image/jpg;base64,base64_encoded_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)？

采纳答案by J.C. Inacio

Regarding limitations in web browsers, MSIE 6/7 do not support the data url scheme... More info on wikipedia

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

The length limits are different per browser - i believe IE8 allows up to 32KB and opera is 4KB, but can't really tell about other browsers...

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

回答by Taylor Edmiston

Short answer: The data URI limit varies.

简短回答：数据 URI 限制各不相同。

There are a lot of answers. As the question was asked 5+ years ago, most are now incorrect due to becoming dated, yet this question sits at the top of Google results for "data uri limit". Data URIs are now widely supportedand IE 7/8 is no longer a relevant browser. There are many references below because the answer is nuanced today.

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

Data URI Limits

数据 URI 限制

The data URI spec does not define a size limit but says applications may impose their own.

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

• Chrome - 2MBfor the current document. Otherwise the limit is the in-memory storage limit for arbitrary blobs: if x64 and NOT ChromeOS or Android, then 2GB; otherwise, total_physical_memory / 5(source).
• Firefox - unlimited
• IE ≥ 9 & Edge - 4GB
• Safari & Mobile Safari - ?

• Chrome -当前文档为2MB。否则，限制是任意 blob 的内存存储限制：如果 x64 而不是 ChromeOS 或 Android，则为 2GB；否则，total_physical_memory / 5（来源）。
• 火狐 -无限制
• IE ≥ 9 & Edge - 4GB
• Safari 和移动 Safari - ?

Alternatives

备择方案

One technology with a higher limit (500MiB in Chrome)that may be an alternative for your use case is Blob URLs via URL.createObjectURL()using the URL APItogether with blobs via the File API. An example of that is provided in Using URL.createObjectURL().

一种具有更高限制（Chrome 中为 500MiB）的技术可以替代您的用例，它是通过URL.createObjectURL()使用URL API 的Blob URLs以及通过File API 的Blob 。使用 URL.createObjectURL() 中提供了一个示例。

A few other alternatives as mentioned in How to write a file / give it to the userare: FileSaver.js, StreamSaver.js, and JSZip.

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

You can use Modernizr to detect support for data URIs over 32kb.

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

Related Questions

相关问题

These answers are pretty much the same as this question, but I mention them to save you the time of reading each one.

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

• 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?This question is about URLs, not data URIs, but there are relevant answers and comments about data URIs.
• Is it possible to programmatically detect size limit for data url?

• 在 Javascript 中获取最大 Data-Uri 大小
• 当数据uri太大时“啊，快”
• Base64 DataURL 图像的大小限制是多少？
• URL 在不同浏览器中的最大长度是多少？这个问题是关于 URLs，而不是数据 URIs，但是有关于数据 URIs 的相关答案和评论。
• 是否可以以编程方式检测数据 url 的大小限制？

回答by miasbeck

I just made a quick check embedding eight different Jpeg-images ranging from 3,844 to 2,233,076 Bytesin size.

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

All of the following browsers displayed every image correctly on my Windows 7(64-bit) system:

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

• Chromium 14.0.816.0
• Firefox 11.0
• Google Chrome 18.0.1025.142
• Internet Explorer 9.0.5 (64 Bit)
• Opera 11.62
• Safari 5.1.5

• 铬 14.0.816.0
• 火狐 11.0
• 谷歌浏览器 18.0.1025.142
• Internet Explorer 9.0.5（64 位）
• 歌剧 11.62
• Safari 5.1.5

回答by John Saunders

From http://www.ietf.org/rfc/rfc2397.txt:

从http://www.ietf.org/rfc/rfc2397.txt：

The "data:" URL scheme is only useful for short values. Note that some applications that use URLs may impose a length limit; for example, URLs embedded within <A>anchors in HTML have a length limit determined by the SGML declaration for HTML [RFC1866]. The LITLEN (1024) limits the number of characters which can appear in a single attribute value literal, the ATTSPLEN (2100) limits the sum of all lengths of all attribute value specifications which appear in a tag, and the TAGLEN (2100) limits the overall length of a tag.

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

回答by Nicholas Daley

I've read that Safari has a limit of 128K for data URIs:

我读过 Safari 的数据 URI 限制为 128K：

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

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

And Chrome is 2M:

而 Chrome 是 2M：

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

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

回答by Jay Kominek

It is really the "data URI scheme".

它确实是“数据 URI 方案”。

As per the Wikipedia page, IE7 lacks support, and IE8 betas limit it to 32kB of data.

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

回答by waza123

2017 answer is: convert data: to blob with function: dataURLtoBlob

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});
}

then create blob url

然后创建blob url

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

then use it in new window if you need.

如果需要，然后在新窗口中使用它。

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>')      

works with big files in chrome/firefox 2017

适用于 chrome/firefox 2017 中的大文件

回答by Brad Broerman

Just an FYI, I was able to load a 130K image using a data url in Firefox 3.5 from a JavaScript ajax call. It truncated the image in IE 8, but the whole thing showed up in FF.

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

回答by Riatre

Seems the limit in Firefox 3.6 is 600KB.

似乎 Firefox 3.6 的限制是 600KB。

回答by select

I tried the code from waza123 but the charCodeAtmethod did not convert all characters correctly. Here is my solution for creating large downloads in the browser. (I used it for JSON data)

我尝试了 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);
}