用户单击时如何使用JavaScript或jQuery读取图像的像素? [英] How can I 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).

推荐答案

如果可以在画布元素中绘制图像，则可以使用

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屋！