HTML5 getImageData without canvas [duplicate]

Question

Is there a way to use getImageData of an image without the canvas? I am wanting to get to pixel color at the mouse position of an image.

Answer 1

No, you can't.

But getting the imageData can be done with an in-memory canvas, that's fast and easy :

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('someImageId');
context.drawImage(img, 0, 0 );
var theData = context.getImageData(0, 0, img.width, img.height);

You may keep the theData variable so that you don't have to build it at each click.

Note that this won't work if the image comes from another domain (and thus it won't work if you open your html file using file:// instead of http://).