Question

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

无论如何使用普通的javascript执行此操作而不添加任何其他库？

我正在开发移动平台的想法，并且不愿意使用外部库。谢谢

Answer 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处理它的速度更快，但边界检查更少）。如果您希望每秒多次执行此查询，则可能需要使用更大的矩形来缓存某些结果。当然，如果像素数据快速变化，这将无效。

Answer 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

在特定的x，y坐标处获取矩形的颜色

2 个答案: