javascript - 带有 base64 字符串(数据 URI)的 HTML 图像标签

Question

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

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

因此，当接收到更大的图片时，我体验到图像(首先完全显示)在几秒钟后从底部越来越多地被切割，直到达到某个点。

我搜索了一下，找到了

Internet Explorer 8 limits data URIs to a maximum length of 32 KB. (Internet Explorer 9 does not have this limitation)

我没有带 IE9 的电脑可以试试，我只有 IE8 和 IE6。 32kb 的限制可能是问题所在吗？但是，为什么图像第一次显示正确，而在接收到更多图像后却被裁剪(总是自下而上)？

Answer 1

我很抱歉这么说，但对于像这样的动画(5-20​​fps；实时)，Javascript 和 HTTP-request-per-frame 不是正确的解决方案。你需要视频流。否则，尽管尝试，视频会不同步，服务器会因只有少数人使用而过载。