0

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.

Alec Hewitt
  • 785
  • 1
  • 11
  • 21

1 Answers1

5

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

rlemon
  • 16,698
  • 11
  • 85
  • 121
  • Thanks for your response. I'm no longer getting the type error. However still the image is not being drawn in the canvas. – Alec Hewitt Jul 26 '13 at 15:06
  • thank you, but I think there must be another mistake as well as its still not working... – Alec Hewitt Jul 26 '13 at 15:20
  • @AlecHewitt ok, well if you could write up a new question and we can work on that issue separately (hint: it has nothing to do with the code you have here). see: http://tinker.io/e3ec8/1 – rlemon Jul 26 '13 at 15:33
  • thank you for your help on this question. I have since taken a slightly different approach, using the method toDataURL(). This has the advantage of working between canvases on the same page but producing an 'InvalidMessageError' when I try to send it to the server. As you suggested I have created a new question which can be seen here: http://stackoverflow.com/questions/17958052/sending-a-data-uri-via-google-app-engine-channel-api – Alec Hewitt Jul 30 '13 at 21:57