用二进制数据在html5画布中显示图像 [英] Displaying images in html5 canvas from binary data

问题描述

我试图通过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）; 
  

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

解决方案

使用putImageData交换drawImage

$ b createImageData（）返回一个ImageData目的。

http://tinker.io/e3ec8

您也有一个错误：
for（var i = 0; i< image.length; i ++）{

您需要 image.data.length 不是图片长度

I am trying to send an image from a canvas through the google app engine channel api to another client who will then display the same image. The message is being received but it is not displaying the image.

On the sending side:

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});

Rendering the data at the other end:

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);

The console keeps saying there is a Type error on the final line.

解决方案

swap drawImage with putImageData

createImageData() returns an ImageData object.

http://tinker.io/e3ec8

you also have a mistake here: for (var i=0; i<image.length; i++) {
you want the image.data.length not the image length

这篇关于用二进制数据在html5画布中显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！