How to get a pixel's x,y coordinate color from an image?
有什么方法可以检查PNG图像的选定点(x,y)是否透明?
基于Jeff的答案,您的第一步将是创建PNG的画布表示。以下内容将创建一个屏幕外画布,该画布的宽度和高度与您的图像相同,并在其上绘制图像。
1 2 3 4 5 | 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); |
之后,当用户单击时,使用
1 | 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,但这并不是必需的。
注意:
画布将是实现此目的的一种好方法,如@pst所述。查看此答案以获取一个好例子:
HTML Canvas中的getPixel?
某些代码也可以专门为您服务:
1 2 3 4 5 6 | 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事件可以很容易地做到这一点。只需在点击处理程序中运行上述代码即可:
1 2 3 | $('el').click(function(e){ console.log(e.clientX, e.clientY) } |
那些应该抓住你的x和y值。
前面的两个答案演示了如何使用Canvas和ImageData。我想提出一个带有可运行示例并使用图像处理框架的答案,因此您无需手动处理像素数据。
MarvinJ提供了image.getAlphaComponent(x,y)方法,该方法仅返回x,y坐标中像素的透明度值。如果此值为0,则像素是完全透明的,介于1和254之间的值为透明级别,最后为255是不透明的。
为了演示,我使用了下面的图像(300x300),背景透明,两个像素分别位于坐标(0,0)和(150,150)。
控制台输出:
(0,0):透明
(150,150):NOT_TRANSPARENT
1 2 3 4 5 6 7 | image = new MarvinImage(); image.load("https://i.imgur.com/eLZVbQG.png", imageLoaded); function imageLoaded(){ console.log("(0,0):"+(image.getAlphaComponent(0,0) > 0 ?"NOT_TRANSPARENT" :"TRANSPARENT")); console.log("(150,150):"+(image.getAlphaComponent(150,150) > 0 ?"NOT_TRANSPARENT" :"TRANSPARENT")); } |
1 | <script src="https://www.marvinj.org/releases/marvinj-0.7.js"> |
与:
1 2 3 4 5 6 7 | const data = context.getImageData(x, y, width, height).data; const pixels = []; for (let i = 0, dx = 0; dx < data.length; i++, dx = i << 2) { if (data[dx+3] <= 8) console.log("transparent x=" + i); } |