从图像中获取像素颜色

Question

我在浏览器中有一张图片。

无论这张图片是否旋转，我都想获取图片左上角像素的颜色（在坐标0,0处）。

我该如何使用JavaScript或PHP代码实现这一目标？

- Eitan

---

对于 PHP 解决方案，请参见 使用 PHP 获取图像的第一个像素。但如果您想要呈现页面的图像而不是嵌入式图像，则无法帮助您。至于获取呈现页面的像素颜色，请参见 JavaScript 吸管（告诉鼠标指针下像素的颜色） 上的被接受的答案。 - user

Answer 1

• 创建画布 document.createElement('canvas')
• 获取2D上下文 canvas.getContext('2d')
• 将图像绘制到画布上 context.drawImage(image, x, y)
  • 确保图像来自同一个域名，否则您将无法访问它的像素
• 获取图像像素数据 context.getImageData(x1, y1, x2, y2)
  • 您只需要左上角的部分，所以使用 context.getImageData(0, 0, 1, 1)
• getImageData的结果将在其data字段中有一组像素数组(context.getImageData(0,0,1,1).data)
  • 该数组将具有r，g，b和a值。

- Louis Ricci

---

谢谢。我觉得你应该因为回答非常快而获得奖励。 如果浏览器不支持HTML5，会出现什么情况？ 在PHP代码中有没有解决方案？ - Eitan

@Eitan - 如果不支持画布，则需要通过AJAX请求将图像传递到服务器，使用服务器端代码获取像素数据，或者使用某些Flash / Silverlight来处理它。 - Louis Ricci

还有一点需要注意：使用drawImage渲染的像素值可能与图像中的值不同，因为颜色空间校正的原因。好在只有当图像包含颜色空间信息时才会发生这种情况。 - ironic

画布大小必须设置为大于或等于图像宽度。否则，即使它们不是，画布分辨率外的像素也会显示为黑色。 - user3186555

@DaMaxContent - 这个问题是特别针对获取左上角像素的，但是对于一般情况下，你需要适当调整画布大小或者直接使用2D上下文drawImage()方法的重载剪切参数。 - Louis Ricci

@LouisRicci 没错，我只是想帮忙。当我试图找出如何获取通常位于画布区域外的像素时，我发现了这个问题，如果画布的高度和宽度没有改变的话。总之，非常好的答案。很高兴能与您分享想法，并感谢您在发布答案后这么长时间仍然回复。 - user3186555

Answer 2

如果要在浏览器上使用图像，除非您先将图像传输到服务器，否则无法使用PHP。

在浏览器中，如果您可以在canvas中绘制图像，则可以使用getImageData()方法：

var myImg = new Image();
myImg.src = 'image.jpg';
var context = document.getElementById('canvas').getContext('2d');
context.drawImage(myImg, 0, 0);
var data = context.getImageData(x, y, 1, 1).data;

你需要考虑任何旋转 - 大概你知道已经应用了什么旋转。

- user1864610

---

画布大小必须设置为大于或等于图像宽度。否则，即使它们不是，画布分辨率外的像素也会显示为黑色。 - user3186555