从二进制数据中HTML5画布显示图像(Displaying images in html5 canv

2019-10-30 07:48发布

我试图通过谷歌应用程序引擎通道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:

交换的drawImage与putImageData

createImageData()返回一个的ImageData对象。

http://tinker.io/e3ec8

你也有一个错误的位置: for (var i=0; i<image.length; i++) {
你想要的image.data.length没有图像长度



文章来源: Displaying images in html5 canvas from binary data