ImageData of an image downloaded externally?

Question

I load the external image and draw it on the Canvas element as follows:

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 ImageData. So after calling context.drawImage , I do this:

var imagedata = canvas.getImageData();
manipulate(imagedata); // modifies imagedata.data
context.putImageData(imagedata, 0, 0);

Is this the only way to get imageData of an image downloaded externally? Drawing an image on canvas and then getting imagedata seems awfully slow. Did I miss something?

Thank!

Answer 1

ImageData, , , , , , - , , , .

, , ImageData , - ( ) .

Answer 2

Ajax, , .