从图像中获取像素颜色

Question

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

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

我怎样才能做到这一点，使用 javascript 或 php 代码？

Answer 1

对于浏览器上的图像，您不能使用 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;

您必须允许任何轮换 - 大概您知道应用了什么轮换。

Answer 2

• 创建画布 document.createElement
• 获取二维上下文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 值。