关于javascript：如何从图片中获取像素的x，y坐标颜色？


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);

之后，当用户单击时，使用event.offsetX和event.offsetY获取位置。然后可以用来获取像素：

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，但这并不是必需的。

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

相关讨论

画布将是实现此目的的一种好方法，如@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)。

enter image description here

控制台输出：

(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">

与：i << 2

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);
}