Javascript 如何从图像中获取像素的 x,y 坐标颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8751020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get a pixel's x,y coordinate color from an image?
提问by Danny Fox
Is there any way to check if a selected(x,y) point of a PNG image is transparent?
有没有办法检查PNG图像的选定（x，y）点是否透明？
回答by Brian Nickel
Building on Jeff's answer, your first step would be to create a canvas representation of your PNG. The following creates an off-screen canvas that is the same width and height as your image and has the image drawn on it.
基于 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);
After that, when a user clicks, use event.offsetXand event.offsetYto get the position. This can then be used to acquire the pixel:
之后，当用户点击时，使用event.offsetX和event.offsetY获取位置。然后可以使用它来获取像素：
var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;
Because you are only grabbing one pixel, pixelData is a four entry array containing the pixel's R, G, B, and A values. For alpha, anything less than 255 represents some level of transparency with 0 being fully transparent.
因为您只抓取一个像素，所以 pixelData 是一个包含像素 R、G、B 和 A 值的四项数组。对于 alpha，任何小于 255 的值都表示某种程度的透明度，0 表示完全透明。
Here is a jsFiddle example: http://jsfiddle.net/thirtydot/9SEMf/869/I used jQuery for convenience in all of this, but it is by no means required.
这是一个 jsFiddle 示例：http: //jsfiddle.net/thirtydot/9SEMf/869/为了方便起见，我使用了 jQuery，但这绝不是必需的。
Note:getImageDatafalls under the browser's same-origin policy to prevent data leaks, meaning this technique will fail if you dirty the canvas with an image from another domain or (I believe, but some browsers may have solved this) SVG from any domain. This protects against cases where a site serves up a custom image asset for a logged in user and an attacker wants to read the image to get information. You can solve the problem by either serving the image from the same server or implementing Cross-origin resource sharing.
注意：getImageData属于浏览器的同源策略以防止数据泄漏，这意味着如果您使用来自其他域的图像或（我相信，但某些浏览器可能已经解决了此问题）来自任何域的 SVG 弄脏了画布，则此技术将失败。这可以防止站点为登录用户提供自定义图像资产并且攻击者想要读取图像以获取信息的情况。您可以通过从同一服务器提供图像或实现跨域资源共享来解决问题。
回答by Jeff Escalante
Canvas would be a great way to do this, as @pst said above. Check out this answer for a good example:
正如@pst 上面所说，画布将是一个很好的方法来做到这一点。查看此答案以获取一个很好的示例：
Some code that would serve you specifically as well:
一些可以专门为您服务的代码：
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]
}
This will go row by row, so you'd need to convert that into an x,y and either convert the for loop to a direct check or run a conditional inside.
这将逐行进行，因此您需要将其转换为 x,y 并将 for 循环转换为直接检查或在内部运行条件。
Reading your question again, it looks like you want to be able to get the point that the person clicks on. This can be done pretty easily with jquery's click event. Just run the above code inside a click handler as such:
再次阅读您的问题，您似乎希望能够获得该人点击的要点。这可以通过 jquery 的 click 事件轻松完成。只需在单击处理程序中运行上面的代码，如下所示：
$('el').click(function(e){
console.log(e.clientX, e.clientY)
}
Those should grab your x and y values.
那些应该抓住你的 x 和 y 值。
回答by Gabriel Ambrósio Archanjo
The two previous answers demonstrate how to use Canvas and ImageData. I would like to propose an answer with runnable example and using an image processing framework, so you don't need to handle the pixel data manually.
前两个答案演示了如何使用 Canvas 和 ImageData。我想提出一个带有可运行示例并使用图像处理框架的答案，因此您无需手动处理像素数据。
MarvinJprovides the method image.getAlphaComponent(x,y)which simply returns the transparency value for the pixel in x,y coordinate. If this value is 0, pixel is totally transparent, values between 1 and 254 are transparency levels, finally 255 is opaque.
MarvinJ提供了image.getAlphaComponent(x,y)方法，它只返回 x,y 坐标中像素的透明度值。如果这个值为 0，像素是完全透明的，1 到 254 之间的值是透明度级别，最后 255 是不透明的。
For demonstrating I've used the image below (300x300) with transparent background and two pixels at coordinates (0,0)and (150,150).
为了演示，我使用了下面的图像 (300x300) 透明背景和坐标(0,0)和(150,150)处的两个像素。
Console output:
控制台输出：
(0,0): TRANSPARENT
(150,150): NOT_TRANSPARENT
(0,0): 透明
(150,150): NOT_TRANSPARENT
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"));
}<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>回答by A-312
With : i << 2
和 ： i << 2
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);
}
