从图像中获取像素颜色

Question

我在浏览器上有一个图像.

我想得到图像颜色的左上角像素(坐标为:0,0),无论图像是否旋转.

我怎么能这样做,使用JavaScript或PHP代码？

Answer 1

• 创建一个canvas document.createElement
• 获取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的值.

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;

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