Using JavaScript or jQuery, how can I get the RGB color where ever the mouse is moving specially in >

Question

I have an image, . I am trying to get the RGB color when ever or where ever I move my mouse cursor.

How can I do

Answer 1

You can do it just like the script for that demo does. Note that the demo does not use an img element, rather it loads the image into a canvas element. The canvas API allows you to get the pixel data like so:

var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;

See the HTML 5 canvas API for details.

If for whatever reason you are required to load the image into the img element, as opposed to a canvas element, you could:

1. Dynamically create a canvas element with the same size and at the same location as the img.
2. Copy the image data from img to canvas via the drawImage method from the canvas context.
3. Hide the img element, leaving the canvas in its place.