用户单击时如何使用JavaScript或jQuery读取图像的像素？

Question

当用户单击图像时，如何使用JavaScript或jQuery读取图像像素的颜色？（当然，通过预订click事件，我们可以获得该像素的（x，y）值）。

Answer 1

如果可以在canvas元素中绘制图像，则可以使用该getImageData方法返回包含RGBA值的数组。

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;