如何在用户点击图像时使用JavaScript或jQuery读取图像的像素？

Question

当用户点击图像时，如何使用JavaScript或jQuery读取图像像素的颜色？ （当然，我们通过订阅click事件得到了这个像素的（x，y）值。）

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. 做“魔术”®

代码：

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/

的源代码