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

Posted 2023-02-27

【中文标题】当用户单击图像时，如何使用 JavaScript 或 jQuery 读取图像的像素？

【英文标题】：How can I use JavaScript or jQuery to read a pixel of an image when user clicks it?

【发布时间】：2010-11-05 16:45:43

【问题描述】：

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

【问题讨论】：

你在做一个颜色选择器吗？

不是真的，尝试以编程方式访问嵌入页面中的图像。

***.com/questions/8751020/… + ***.com/questions/2159044/…

【参考方案1】：

如果您可以在画布元素中绘制图像，那么您可以使用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;

【参考方案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？

创建<canvas> 获取画布context 将<img>复制到<canvas> 获取画布图像数据（值数组[r,g,b,a,r,g,b,a,r,g,..]） 做“魔法”®

文件代码：

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/ 的源代码

---

PS：如果你打算改变数据并将它们绘制回画布上，你可以使用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]

您可以在http://qry.me/xyscope/ 上进行实验，此代码在源代码中，只需将其复制/粘贴到控制台中即可。