ImageData of an externally loaded Image?
- by sri
I load an external image and draw it on the Canvas element like so:
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
var image = new Image();
image.onload = function(evt) { context.drawImage(evt.target, 0, 0); }
image.src = "test.jpg";
But I want to get the ImageData. So after calling context.drawImage, I do this:
var imagedata = canvas.getImageData();
manipulate(imagedata); // modifies imagedata.data
context.putImageData(imagedata, 0, 0);
Is that the only way to get the imageData of an externally loaded image?
Drawing the image on canvas & then getting the imagedata seems awfully slow.
Am I missing something?
Thanks!
