如何从图像中获取像素的x,y坐标颜色?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (16)

有没有任何方法来检查选定的(x,y)点的PNG图像是否是透明的?

提问于
用户回答回答于

你的第一步就是创建一个PNG的画布表示。以下内容会创建一个与图像宽度和高度相同的画面外画布,并在其上绘制图像。

var img = document.getElementById('my-image');
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

之后,当用户点击,使用event.offsetXevent.offsetY获取位置。这可以用来获取像素:

var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;

用户回答回答于

有些代码也可以专门为你服务:

var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

for (var i = 0, n = pix.length; i < n; i += 4) {
  console.log pix[i+3]
}

这将逐行进行,因此您需要将其转换为x,y,并将for循环转换为直接检查,或者在内部运行条件。

再读一遍你的问题,你就会想要得到别人所点击的观点。使用jQuery的Click事件可以很容易地做到这一点。只需在单击处理程序中运行上述代码,如下所示:

$('el').click(function(e){
   console.log(e.clientX, e.clientY)
}

这些应该会得到你的x和y值。

扫码关注云+社区