Как использовать JavaScript или jQuery для чтения пикселя изображения, когда пользователь щелкает по нему?

Question

Как я могу использовать JavaScript или jQuery для считывания цвета пикселя изображения, когда пользователь нажимает на него? (конечно, мы имеем значение (x, y) этого пикселя, подписавшись на событие click).

Answer 1

Если вы можете нарисовать изображение в элементе canvas, вы можете использовать метод getImageData, чтобы получить массив, содержащий значения RGBA.

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;

Answer 2

Я искал способ подсчета зеленых пикселей на изображении, и в итоге я написал свои собственные функции. Вот, пожалуйста,

Магия ®

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);
}

Где вы получаете imgData?

1. создать <canvas>
2. получить холст context
3. копия <img> на <canvas>
4. получить данные изображения холста (массив значений [r,g,b,a,r,g,b,a,r,g,..])
5. do `The magic`®

le код:

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

Рабочий пример см. В исходном коде http://qry.me/xyscope/