“数据：” URL方案值是否有大小限制？我对流行的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)？
Answers:
关于Web浏览器中的限制，MSIE 6/7不支持数据URL方案...有关Wikipedia的更多信息
每个浏览器的长度限制是不同的-我相信IE8最多允许32KB，Opera是4KB，但无法真正说明其他浏览器...
有很多答案。就像5年前问这个问题一样，大多数问题由于过时而现在不正确，但是这个问题排在Google结果“数据URI限制”的顶部。数据URI现在得到广泛支持，并且IE 7/8不再是相关的浏览器。下面有许多参考资料，因为今天的答案是微妙的。
数据URI规范未定义大小限制，但表示应用程序可以强加自己的大小。
total_physical_memory / 5（来源）。具有较高限制的一项技术（Chrome中为500MiB）可以替代您的用例，其中一种技巧是使用URL API通过URL.createObjectURL（）来使用Blob URL，以及通过File API来使用Blob 。使用URL.createObjectURL（）中提供了一个示例。
如如何编写文件/将文件提供给用户中所述，还有一些其他选择：FileSaver.js，StreamSaver.js和JSZip。
您可以使用Modernizr来检测对超过32kb的数据URI的支持。
这些答案与这个问题几乎相同，但是我提到它们是为了节省您阅读每个问题的时间。
我只是做了一个快速检查，即嵌入了8个不同的Jpeg图像，大小从3844到2233076076字节不等。
以下所有浏览器均在Windows 7（64位）系统上正确显示每个图像：
从http://www.ietf.org/rfc/rfc2397.txt：
“ data：” URL方案仅对短值有用。请注意，某些使用URL的应用程序可能会施加长度限制。例如，嵌入
<A>在HTML中的锚点中的URL的长度限制由HTML的SGML声明确定[RFC1866]。LITLEN（1024）限制可以在单个属性值文字中出现的字符数，ATTSPLEN（2100）限制出现在标签中的所有属性值规范的所有长度的总和，而TAGLEN（2100）限制标签的总长度。
2017年的答案是：将数据转换为具有功能的data 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网址
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中处理大文件
window.open(temp_url, '_blank');似乎也可以使用，而不需要iframe等。需要注意的一件事是，Chrome不允许在blob URL上执行“文件”>“另存为”。
charCodeAt无法正确转换所有字符，因此建议使用new TextEncoder('utf-8').encode。我在帖子中举一个例子。
它确实是“数据URI方案”。
根据Wikipedia页面，IE7缺乏支持，而IE8 Beta将其限制为32kB数据。
仅供参考，我能够通过JavaScript ajax调用在Firefox 3.5中使用数据URL加载130K图像。它在IE 8中将图像截断，但整个内容都显示在FF中。
似乎Firefox 3.6中的限制为600KB。
我尝试了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);
}