当用户点击图片时，我该如何使用JavaScript或jQuery读取一个像素？

Question

当用户在图像上单击时，我该如何使用JavaScript或jQuery读取像素的颜色？（当然，我们可以通过订阅点击事件获取此像素的(x,y)值。）

- jimTong

---

你是在尝试制作一个颜色选择器吗？ - James

不是很对，尝试以编程方式访问嵌入在页面中的图像。 - jimTong

如何从图像中获取像素的x，y坐标和颜色？ 如何使用jQuery获取图像上鼠标单击的x，y坐标？ - Ciro Santilli OurBigBook.com

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;

- Richard M

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. 获取canvas context
3. 将<img>复制到<canvas>
4. 获取canvas图像数据（一个值数组[r,g,b,a,r,g,b,a,r,g,..]）
5. 进行`The magic`®操作

代码:

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/ 的源代码以获取一个工作示例。

---

注：如果您计划更改数据并将其重新绘制在画布上，则可以使用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/上进行尝试。这里的代码可以在源代码中找到，只需要将其复制/粘贴到控制台中即可。

- Qwerty