带有base64字符串的HTML图像标记（数据URI） [英] HTML image tag with base64 string (data URI)

问题描述

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

I get binary data of jpeg images from a series of httprequests about every 50-200 ms, I convert this data to a base64 string and insert the string in the img tag with javascript.

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

因此，当收到更多的照片时，我会在几秒钟之后体验到图像（首先完全显示）从底部开始越来越多，直到达到某一点。

So when receiving greater pics, I experience that the image (first displayed fully) after some seconds get cut down from the bottom more and more until it reaches a certain point.

我搜索了一下，找到了

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

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限制可能是问题吗？但是为什么图像第一次正确显示并且在接收图像后更频繁地显示它会被削减（总是自下而上）？

I have no computer with IE9 to try, I only have IE8 and IE6. Could the 32kb restriction be the problem? But why does the image show up correctly the first time and after receiving the image more often it gets cut down (always form bottom up)?

推荐答案

很抱歉这样说，但对于像这样的动画（5-20​​fps;实时），Javascript和每帧HTTP请求不是正确的解决方案。你需要视频流。否则，尽量尝试，视频将不同步，服务器将超载，只有少数人使用它。

I'm sorry to say this, but for animations like this (5-20fps; realtime), Javascript and a HTTP-request-per-frame is not the right solution. You need video streaming. Otherwise, try as you might, the video will be out of sync, and the server will be overloaded with only a few people using it.

这篇关于带有base64字符串的HTML图像标记（数据URI）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！