如何在用户点击图像时使用JavaScript或jQuery读取图像的像素？ [英] How to use JavaScript or jQuery to read a pixel of an image when user clicks it?

问题描述

当用户点击图像时，如何使用JavaScript或jQuery读取图像像素的颜色？ （当然，我们通过订阅click事件得到了这个像素的（x，y）值。）

How can I use JavaScript or jQuery to read the color of a pixel of an image when the user clicks on it? (of course we have the (x,y) value of this pixel by subscribing to the click event).

推荐答案

如果你可以在画布元素中绘制图像，然后您可以使用 getImageData 方法返回包含RGBA值的数组。

If you can draw the image in a canvas element then you can use the getImageData method to return an array containing RGBA values.

var img = new Image();
img.src = 'image.jpg';
var context = document.getElementById('canvas').getContext('2d');
context.drawImage(img, 0, 0);
data = context.getImageData(x, y, 1, 1).data;

这篇关于如何在用户点击图像时使用JavaScript或jQuery读取图像的像素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！