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

Question

有什么方法可以检查 PNG 图像的选定 (x,y) 点是否透明？

Answer 1

根据 Jeff 的回答，您的第一步是创建 PNG 的 Canvas 表示。以下代码创建了一个与您的图像宽度和高度相同的屏幕外 Canvas ，并在其上绘制了图像。

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 属于浏览器的同源策略以防止数据泄漏，这意味着如果您用来自另一个域的图像弄脏 Canvas 或(我相信，但某些浏览器可能已经解决了这个问题)来自任何域的 SVG。这可以防止站点为登录用户提供自定义图像 Assets 并且攻击者想要读取图像以获取信息的情况。您可以通过从同一台服务器提供图像或实现 Cross-origin resource sharing 来解决问题。 .