问题描述

“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)中使用多长时间？

最佳解决方案

关于 Web 浏览器的限制，MSIE 6/7 不支持数据 url 方案… 更多信息 wikipedia

每个浏览器的长度限制是不同的 – 我相信 IE8 允许高达 32KB，歌剧是 4KB，但不能真正地告诉其他浏览器…

次佳解决方案

我刚刚做了一个快速检查嵌入八个不同的 Jpeg-images 范围从 3,844 到 2,233,076 字节的大小。

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

  • chrome 14.0.816.0

  • Firefox 11.0

  • Google Chrome 18.0.1025.142

  • Internet Explorer 9.0.5(64 位)

  • 歌剧 11.62

  • Safari 5.1.5

第三种解决方案

来自 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.

第四种方案

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

有很多答案。由于这个问题是在 5 年前提出的，大部分时间已经过时了，所以这个问题是谷歌搜索结果顶部的 “数据 uri 限制” 。数据 URI 现在是 widely supported，IE 7/8 不再是相关的浏览器。以下有很多参考文献，因为今天的答案是微妙的。

数据 URI 限制

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

  • chrome – 2MB

  • Firefox – unlimited

  • IE≥9&边 – 4GB

  • 野生动物园&移动 Safari – ？

Alternatives

具有 higher limit (500MiB in Chrome)的一个实验技术可能是您的用例的替代品，是 URL.createObjectURL()通过 URL API 与 BABB 通过 File API 。使用 URL.createObjectURL() 中提供了一个示例。

如何写入文件/给用户提及的其他一些替代方法是：FileSaver.js，StreamSaver.js 和 JSZip 。

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

相关问题

这些答案与这个问题大致相同，但我提到他们为你节省阅读时间。

第五种方案

我读过 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

第六种方案

真的是 “data URI scheme” 。

根据维基百科页面，IE7 缺少支持，IE8 betas 将其限制为 32kB 的数据。

第七种方案

只是一个 FYI，我能够使用 Firefox 3.5 中的数据网址从 JavaScript ajax 调用加载 130K 的图像。它在 IE 8 中截断了图像，但整个事情出现在 FF 中。

第八种方案

似乎在 Firefox 3.6 的限制是 600KB 。

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。