how to get the RGB value of an image in a page using javascript?

Question

I am trying to make a bookmark-let. But I\'m stuck at a point. I need to extract the RGB or the color value of an image of very x pixel using the \"For Next\" statement. But

Answer 1

This is a tough question. There's no method I'm aware of in the standard DOM that would allow you to extract the RGB value of pixels in an .

However, if you're willing to dig in to HTML5, you can take advantage of the element. You can load an image into the canvas (.drawImage()) and then get the RGB values you're looking for (.getImageData(); see the link in SLaks’ answer). Of course, this won't work on IE8 since it doesn't support .

An alternative option might be to make an AJAX call to a web service to get pixel data. The server-side script can load the image, get RGB values, and return it as JSON to your bookmarklet. This obviously adds the latency of a roundtrip to a server, but is more compatible. (Also consider cross-domain issues, however.)