Displaying images in html5 canvas from binary data

问题:

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.

回答1:

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