如何在用户点击图像时使用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/的源代码