数据协议URL大小限制
“data：”URLscheme值是否有任何大小限制？ 我对stream行的Web浏览器的局限性感兴趣。 换句话说， 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) ？
关于网页浏览器的限制，MSIE 6/7不支持数据urlscheme…更多维基百科的信息
长度限制是不同的每个浏览器 – 我相信IE8允许高达32KB和歌剧是4KB，但不能真正告诉其他浏览器…
我只是做了一个快速检查，embedded8个不同的Jpeg图像，大小从3844到2233,076字节 。
以下所有浏览器都在我的Windows 7 （64位）系统上正确显示每个映像：
- 铬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
简短的回答：数据的URI限制不尽相同。
有很多答案。 正如5年前提出的问题一样，现在大部分都是由于date变得不正确，但是这个问题位于谷歌search结果的“数据限制”的顶部。 数据URI现在被广泛支持 ，IE 7/8不再是相关的浏览器。 以下有很多参考文献，因为今天的答案是微妙的。
数据URI限制
数据URI规范没有定义大小限制，但是说应用程序可能强加它们自己的。
- Chrome – 2MB
- Firefox – 无限
- IE≥9和Edge – 4GB
- Safari和移动Safari – ？
备择scheme
一个具有更高限制的实验性技术（Chrome中为500MiB）可能是您的使用案例的一种替代方法，它是通过URL API与URL通过URL.createObjectURL（）一起通过File API提供blob。 使用URL.createObjectURL（）提供了一个例子。
如何写入文件/提供给用户的其他一些select是： FileSaver.js ， StreamSaver.js和JSZip 。
您可以使用Modernizr检测对32kb以上的数据URI的支持。
相关问题
这些答案与这个问题几乎是一样的，但我提到他们为了节省阅读每一个的时间。
- 在Javascript中获得最大的Data-Uri大小
- 当数据太大时“Aw，Snap”
- 什么是Base64 DataURL图像的大小限制？
- 不同浏览器中URL的最大长度是多less？ 这个问题是关于URL，而不是数据URI，但是有关于数据URI的相关答案和评论。
- 有没有可能以编程方式检测数据url的大小限制？
来自http://www.ietf.org/rfc/rfc2397.txt ：
“data：”URLscheme只对短值有用。 请注意，某些使用URL的应用程序可能会施加长度限制; 例如，
<A>embedded在HTML锚点中的URL具有由HTML的SGML声明[RFC1866]确定的长度限制。 LITLEN（1024）限制了可以出现在单个属性值文字中的字符数，ATTSPLEN（2100）限制了出现在标签中的所有属性值规格的所有长度之和，并且TAGLEN（2100）标签的总长度。
我读过Safari的数据URI有128K的限制：
http://blog.clawpaws.net/post/2007/07/16/Storing-iPhone-apps-locally-with-data-URLs#c1989348
而Chrome是2M：
这实际上是“ 数据URIscheme ”。
根据维基百科页面，IE7缺乏支持，而IE8testing版将其限制为32kB的数据。
只是一个FYI，我能够使用Firefox 3.5中的数据URL从JavaScript ajax调用加载130K图像。 它在IE 8中截断了图像，但整个事情在FF中出现。
似乎Firefox 3.6的限制是600KB。
2017答案是：转换数据：到blob与function：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}); }
然后创buildbloburl
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中使用大文件
我尝试了waza123的代码，但charCodeAt方法没有正确地转换所有字符。 这是我在浏览器中创build大量下载的解决scheme。 （我用它的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); }
