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

Question

有什么方法可以检查PNG图像的选定点（x，y）是否透明？

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表示完全透明。

在所有这些中，为了方便起见，我都使用jQuery，但这并不是必需的。

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