有什么方法可以检查 PNG 图像的选定 (x,y) 点是否透明?
最佳答案
根据 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 来解决问题。 .
关于javascript - 如何检查图像的特定像素是否透明?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8751020/