HTML5 getImageData without canvas [duplicate]

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.

Asked By: Bryan Williams
||

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://).

Answered By: Denys Séguret
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .



# More Articles