HTML image tag with base64 string (data URI)

问题:

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.

I searched a bit and found

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

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)?

回答1:

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.