問題描述

“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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。