通过 websocket,我检索 PNG 格式的图像的二进制缓冲区(类似的东西 http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html).
我想将此 PNG 缓冲区加载到画布中,然后读取不同的像素以读取未压缩的数据。
我设法做到了,但这是愚蠢的:
function onBinaryMessage(/*ArrayBuffer*/ input) {
input = new Uint8Array(input);
var str = '';
for (var i = 0; i < input.byteLength; i++)
str = str + String.fromCharCode(input[i]);
var image = document.getElementById("image");
image.src = 'data:image/png;base64,' + btoa(str);
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.drawImage(image, 0, 0);
var imgData = ctx.getImageData(0, 0, image.width, image.height);
console.log(imgData);
}
我必须将我的二进制文件转换为字符串以对这个字符串进行encode64,然后将我的图像src影响到这个新创建的encoded64字符串...
浏览器必须将这个encode64数据重新转换成我得到的原始PNG缓冲区......
有什么方法可以直接设置画布缓冲区吗?
或者有什么方法可以更好地处理流媒体?
我想我可以使用文件 API 将缓冲区写入临时文件,但创建文件会花费很多:(
有什么建议吗?
您可以将输入缓冲区转换为 Blob,获取它的 URL 并使用它来绘制到画布上:
function onBinaryMessage(input) {
var blob = new Blob([input], {type: 'image/png'});
var url = URL.createObjectURL(blob);
var img = new Image;
img.onload = function() {
var ctx = document.getElementById("canvas").getContext('2d');
ctx.drawImage(this, 0, 0);
URL.revokeObjectURL(url);
}
img.src = url;
}
请注意,这将是异步的,您需要在内部提供回调机制onload
处理程序(无论如何,您确实需要在自己的示例中执行此操作)。但您不必转换为 base64 等,这是一个相对昂贵的操作。
另请注意URL.createObjectURL
目前处于实验阶段。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)