在二进制数据中显示html5画布中的图像

时间:2013-07-26 10:59:50

标签: javascript google-app-engine python-2.7 html5-canvas channel-api

我正在尝试将图片从画布通过Google应用引擎渠道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);

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

1 个答案:

答案 0 :(得分:5)

使用putImageData交换drawImage

createImageData()返回一个ImageData对象。

http://tinker.io/e3ec8

你在这里也犯了一个错误: for (var i=0; i<image.length; i++) {
你想要image.data.length而不是图像长度