How to use javascript or jQuery to read a pixel of an image?

Question

How to use javascript or jQuery to read the color of a pixel of an image when user click on it? (of course we have the (x,y) value of this pixel by subscribing to the click event).

Thanks!

Answer 1

You can't read the color of an image's pixels in Javascript, since you can't read images in Javascript. You can only detect which pixel is being selected, and send this information off to something that is able to interpret the image.

An example would be getting coordinates with javascript, and using AJAX to go to a php script that finds the color at pixel (x,y) on the image. Some better methods would use flash or director since they wouldn't have to make the http request.

Answer 2

If you can draw the image in a canvas element then you can use the getImageData method to return an array containing RGBA values.

var img = new Image();
img.src = 'image.jpg';
var context = document.getElementById('canvas').getContext('2d');
context.drawImage(img, 0, 0);
data = context.getImageData(x, y, 1, 1).data;