html5播放png帧,HTML5将png缓冲区加载到画布中(用于流式传输)

通过websocket,我检索PNG格式的图像的二进制缓冲区(类似的东西).

我想将此PNG缓冲区加载到画布中,然后读取不同的像素以读取未压缩的数据.

我设法做到了,但这是愚蠢的:

function onBinaryMessage(/*ArrayBuffer*/ input) {

input &＃61; new Uint8Array(input);

var str &＃61; &＃39;&＃39;;

for (var i &＃61; 0; i

str &＃61; str &＃43; String.fromCharCode(input[i]);

var image &＃61; document.getElementById("image");

image.src &＃61; &＃39;data:image/png;base64,&＃39; &＃43; btoa(str);

var c &＃61; document.getElementById("canvas");

var ctx &＃61; c.getContext("2d");

ctx.drawImage(image, 0, 0);

var imgData &＃61; ctx.getImageData(0, 0, image.width, image.height);

console.log(imgData);

}

我必须将我的二进制文件转换成一个字符串来编码64这个字符串,而不是我影响我的图像src到这个新创建的encoded64字符串...浏览器必须将这个编码的64数据重新转换为我得到的原始PNG缓冲区...

有没有办法直接设置画布缓冲区&＃xff1f;或者有什么方法可以更好地处理流媒体&＃xff1f;

我想我可以使用File API将缓冲区写入临时文件,但创建文件会花费很多:(

有什么建议吗&＃xff1f;