how to see if a pixel's color is red? (with jquery)

Question

I have an image and I want to see if the pixel that the mouse is on it is red or not to decide to do something in the following function, how can I find out that the pixel is red or not ?

$('#picture').mousemove(function(e) {} ;)

`if (pixel == 'red')`, seriously though, you can't do that without a canvas and some complicated math stuff. — adeneo, Apr 13 '13 at 21:08
Try this plugin http://www.project-sierra.de/ImageColorPicker/example/ — Adil Shaikh, Apr 13 '13 at 21:09
this may be helpful: http://stackoverflow.com/questions/6735470/get-pixel-color-from-canvas-on-mouseover — PitaJ, Apr 13 '13 at 21:10
As an answer is already accepted, I'll add a quick demonstration here -> [**FIDDLE**](http://jsfiddle.net/r8gtT/1/) ! — adeneo, Apr 13 '13 at 21:40
@adeneo please write your answer as an answer so that people can see your complete answer and use it, thanks — Navid777, Apr 14 '13 at 09:08

score 3 · Accepted Answer · answered Apr 13 '13 at 21:09

You can do this with canvas. Draw the image on a canvas, after that using getImageData method you can get the image's pixels. As last step calculate the right pixel where the mouse is located and check it's red value (you'll have the RGBA for the pixel).

Probably the most tricky part will be to find the right pixel but this shouldn't be a big issue. Use the relative mouse position for the canvas. You'll already know how big is the image so it'll be easy to find the pixel.

how to see if a pixel's color is red? (with jquery)

1 Answers1