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

admin管理员组

文章数量:1244222

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 i don't know what function can help me to extract the RGB value. Can someone please help me out with the function that tells the value of RCG of a given point in a picture?

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 i don't know what function can help me to extract the RGB value. Can someone please help me out with the function that tells the value of RCG of a given point in a picture?

• javascript
• image

Share Improve this question Follow edited May 19, 2010 at 15:53 Georg Fritzsche 99k2626 gold badges196196 silver badges236236 bronze badges asked May 2, 2010 at 20:32 Nok ImchenNok Imchen 2,84277 gold badges3636 silver badges5959 bronze badges 1

• This questions appears to be a duplicate: stackoverflow./questions/934012/get-image-data-in-javascript – Anderson Green Commented May 6, 2012 at 19:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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 <img>.

However, if you're willing to dig in to HTML5, you can take advantage of the <canvas> 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 <canvas>.

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 patible. (Also consider cross-domain issues, however.)

You can use a canvas.

本文标签： how to get the RGB value of an image in a page using javascriptStack Overflow