如何使用JavaScript或jQuery读取图像的像素，当用户点击它？

当用户点击图像时，如何使用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

我search了一个方法来计算一个图像中的绿色像素，最终写了我自己的function。 干得好

魔术®

 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. 创build<canvas>
2. 获取canvascontext
3. 将<img>复制到<canvas>
4. 获取canvas图像数据（数组[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/的源代码;