23

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

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

我该怎么做,使用 javascript 或 php 代码?

4

2 回答 2

50
  • 创建画布 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
    • 该数组将具有rgba
于 2013-07-22T13:47:24.927 回答
18

对于浏览器上的图像,您不能使用 PHP,除非您可以先将图像传输到服务器。

在浏览器中,如果您可以在 a 中绘制图像,则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;

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

于 2013-07-22T13:47:21.713 回答