javascript - 从二进制数据在 html5 画布中显示图像

Question

我正在尝试通过 google app engine channel api 将画布中的图像发送到另一个客户端，然后该客户端将显示相同的图像。正在接收消息，但未显示图像。

在发送方：

var image = context.getImageData(0, 0, imageCanvas.width, imageCanvas.height);
var buffer = new ArrayBuffer(image.data.length);
var bytes = new Uint8Array(buffer);
for (var i=0; i<bytes.length; i++) {
    bytes[i] = image.data[i];
}

sendMessage({image: buffer});

在另一端渲染数据：

var bytes = new Uint8Array(buffer.size);
var image = context.createImageData(imageCanvas.width, imageCanvas.height);
for (var i=0; i<image.length; i++) {
    image.data[i] = bytes[i];
}
context.drawImage(image, 0, 0);

控制台一直说最后一行有一个类型错误。

Answer 1

用 putImageData 交换 drawImage

createImageData() 返回一个 ImageData 对象。

http://tinker.io/e3ec8

您在这里也有一个错误： for (var i=0; i<image.length; i++) {
您想要的image.data.length不是图像长度