带有 base64 字符串的 HTML 图像标记（数据 URI）答案

【问题标题】：HTML image tag with base64 string (data URI)带有 base64 字符串的 HTML 图像标记（数据 URI）
【发布时间】：2012-06-23 11:36:54
【问题描述】：

我大约每 50-200 毫秒从一系列 httprequests 中获取 jpeg 图像的二进制数据，我将此数据转换为 base64 字符串并使用 javascript 将字符串插入到 img 标签中。

var img = document.getElementById('img1');
img.src = 'data:image/jpeg;base64,' + b64str + '';

因此，当收到更大的图片时，我会体验到图像（第一次完全显示）在几秒钟后会从底部越来越多地被切掉，直到达到某个点。

我搜索了一下发现

Internet Explorer 8 将数据 URI 的最大长度限制为 32 KB。（Internet Explorer 9 没有这个限制）

我没有IE9的电脑可以尝试，我只有IE8和IE6。 32kb 的限制可能是问题吗？但是为什么图像第一次显示正确，而收到图像后却经常被削减（总是自下而上）？

【问题讨论】：

是否可以将img.src设置为与httprequest相同的URL，以便直接获取数据？
嗯，是的，图像通常是。那没有回答我的问题。为什么你不能放弃整个 XmlHttpRequest 的东西，只将图像 src 设置为提供二进制图像数据的 URL？
因为同步问题
那些存在？您可以使用 JS 每 50 毫秒更改一次 src 并强制重新下载图像。如果您担心缓存，请在每次更改 URL 时在 URL 末尾添加一个唯一的虚拟参数。
好吧，我已经尝试过了，即使使用 img.onload() 事件，图片总是显示较晚。

【解决方案1】：

我很抱歉这么说，但对于这样的动画（5-20fps；实时），Javascript 和每帧 HTTP 请求不是正确的解决方案。您需要视频流。否则，请尽你所能，视频将不同步，服务器将因只有少数人使用而过载。

【讨论】：