如何从图像中获取像素的x，y坐标颜色？
有什么办法来检查一个PNG图像的选定（x，y）点是否透明？
基于Jeff的回答，您的第一步将是创build一个PNG的canvas表示。 下面创build一个与图像宽度和高度相同的画面外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值的四个条目数组。 对于阿尔法，小于255的任何东西代表某种程度的透明度，0是完全透明的。
这里是一个jsFiddle的例子： http : //jsfiddle.net/thirtydot/9SEMf/869/我在这方面使用jQuery方便，但它并不是必需的。
注意： getImageData属于浏览器的同源策略，以防止数据泄漏，这意味着如果您使用来自其他域的图像或者（我相信，但是某些浏览器可能已经解决了这个问题）来自任何域的SVG，该技术将会失败。 这样可以防止站点为login用户提供自定义图像资源，攻击者希望读取图像以获取信息。 您可以通过从同一台服务器提供映像或实施跨源资源共享来解决问题。
像上面的@pst所说的，canvas是做这件事的好方法。 看看这个答案是一个很好的例子：
getPixel从HTMLcanvas？
一些代码也可以专门为您服务：
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值。
