获取特定 x,y 坐标的矩形颜色答案

【问题标题】：Get colour of rectangle at specific x,y coordinates获取特定 x,y 坐标的矩形颜色
【发布时间】：2013-02-01 11:35:25
【问题描述】：

我希望能够获得特定 x,y 处像素的颜色画布上的坐标（矩形颜色，但像素将够了）。

有没有在不添加任何额外库的情况下使用普通 javascript 执行此操作？

我正在以移动平台的想法开发它，并且不希望使用外部库。谢谢

【问题讨论】：

标签： javascript html canvas colors pixel

【解决方案1】：

为了答案，让我们直接去source。

你想要context.getImageData(x, y, width, height);

这会从画布中抓取一个矩形，并以“ImageData”对象的形式返回那里的所有像素。这个对象又具有一个“数据”属性，就所有意图和目的而言，它只是一个普通的数组（它不是，但如果你只是想从中读取数据，你可以假装它是）。

数据数组的样子

[r,g,b,a,r,g,b,a,r,g,b,a,...] 其中 r、g、b 和 a 是一个像素颜色的红色、绿色、蓝色和 alpha 通道。像素的排列方式就像在英文书中阅读一样（从左到右，然后从上到下）。

出于您的目的，您可以使用var pixel = context.getImageData(x,y,1,1).data。那么如果你想知道红色部分，做pixel[0]，绿色？ pixel[1]...等等。

但是请注意，在我的经验测试中，getImageData 是一个难以置信昂贵的操作（尤其是在 Firefox 中；Chrome 处理它的速度更快，但边界检查更少）。如果您希望每秒执行多次此查询，则可能值得使用更大的矩形来缓存一些结果。当然，如果像素数据快速变化，这将不起作用。

【讨论】：

谢谢，这正是我需要的帮助：D

【解决方案2】：

Canvas 的 getImageData() 返回一个 ImageData 对象，该对象复制画布上指定矩形的像素数据。

var color = canvas2d_context.getImageData(pixel_coord_x, pixel_coord_y, 1, 1);

console.log('pixel red value:   ' + color.data[0]);
console.log('pixel green value: ' + color.data[1]);
console.log('pixel blue value:  ' + color.data[1]);
console.log('pixel alpha value: ' + color.data[1]);

...主要来自http://www.w3schools.com/tags/canvas_getimagedata.asp

【讨论】：