How can I use JavaScript or jQuery to read a pixel of an image when user clicks it?

Question

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

Not really, try to programmatically access an image imbedded in a page. — , Jun 24 '09 at 22:55
http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image + http://stackoverflow.com/questions/2159044/getting-the-x-y-coordinates-of-a-mouse-click-on-an-image-with-jquery — Ciro Santilli OurBigBook.com, Feb 09 '16 at 15:56

score 42 · Accepted Answer · answered Jun 24 '09 at 23:29

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;

Qwerty · Answer 2 · 2021-03-30T15:08:07.490

This solution will be much faster if you need to read the pixels repeatedly.

The magic ®

function getPixel(imgData, index) {
  var i = index*4, d = imgData.data
  return [d[i],d[i+1],d[i+2],d[i+3]] // [R,G,B,A]
}

function getPixelXY(imgData, x, y) {
  return getPixel(imgData, y*imgData.width+x)
}

Where do you get imgData?

create <canvas>
get canvas context
copy <img> to <canvas>
get canvas image data (an array of values [r,g,b,a,r,g,b,a,r,g,..])
do `The magic`®

le code:

var cvs = document.createElement('canvas'),
    img = document.getElementsByTagName("img")[0]   // your image goes here
    // img = $('#yourImage')[0]                     // can use jquery for selection
cvs.width = img.width; cvs.height = img.height
var ctx = cvs.getContext("2d")
ctx.drawImage(img,0,0,cvs.width,cvs.height)
var idt = ctx.getImageData(0,0,cvs.width,cvs.height)

// The magic®
getPixel(idt, 852)  // returns array [red, green, blue, alpha]
getPixelXY(idt,1,1) // same pixel using x,y

For a working example see source code of http://qry.me/xyscope/

PS: If you plan to mutate the data and draw them back on the canvas, you can use subarray

var
 a = getPixel(idt, 188411), // Array(4) [0, 251, 0, 255]
 b = idt.data.subarray(188411*4, 188411*4 + 4) // Uint8ClampedArray(4) [0, 251, 0, 255]

a[0] = 255 // does nothing
getPixel(idt, 188411) // Array(4) [0, 251, 0, 255]

b[0] = 255 // mutates the original imgData.data
getPixel(idt, 188411) // Array(4) [255, 251, 0, 255]

// or use it in the function
function getPixel(imgData, index) {
  var i = index*4, d = imgData.data
  return imgData.data.subarray(i, i+4) // returns subarray [R,G,B,A]
}

You can experiment with this on http://qry.me/xyscope/, the code for this is in the source, just copy/paste it in the console.

How can I use JavaScript or jQuery to read a pixel of an image when user clicks it?

2 Answers2

The magic ®

Where do you get imgData?

le code:

Linked