如何检查图像的特定像素是否透明？

Question

有没有办法检查PNG图像的选定（x，y）点是否透明？

原文由 Danny Fox 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

基于 Jeff 的回答，您的第一步是创建 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.offsetX 和 event.offsetY 来获取位置。然后可以使用它来获取像素：

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

因为您只抓取一个像素，所以 pixelData 是一个包含像素的 R、G、B 和 A 值的四项数组。对于 alpha，任何小于 255 的值都表示某种程度的透明度，0 表示完全透明。

这是一个 jsFiddle 示例：http: //jsfiddle.net/thirtydot/9SEMf/869/ 为了方便起见，我使用了 jQuery，但这绝不是必需的。

注意： getImageData 属于浏览器的同源策略以防止数据泄漏，这意味着如果您使用来自另一个域的图像弄脏画布或（我相信，但某些浏览器可能已经解决了这个问题，则此技术将失败） ) 来自任何域的 SVG。这可以防止网站为登录用户提供自定义图像资产并且攻击者想要读取图像以获取信息的情况。您可以通过从同一服务器提供图像或实现 跨域资源共享 来解决该问题。

原文由 Brian Nickel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

正如@pst 上面所说，Canvas 将是一个很好的方法。查看此答案以获得一个很好的示例：

从 HTML 画布中获取像素？

一些也可以专门为您服务的代码：

 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 的点击事件很容易地完成。只需在点击处理程序中运行上述代码即可：

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

那些应该抓住你的 x 和 y 值。

原文由 Jeff Escalante 发布，翻译遵循 CC BY-SA 3.0 许可协议