是否可以一次获取图像数据并在特定位置之后提取数据？

Question

为了从特定坐标的图像中获取颜色，我使用了这个答案get-pixel-color-from-canvas-on-mouseover。但是，在 Microsoft 第 56 页的 Powerpoint 上，它说 getImageData 必须使用一次，因为来自显卡的调用非常密集。他们举了一个例子，但它是为了分析整个画面。

有没有办法只使用一次 getImageData，然后只分析来自特定 x 和 y 坐标的数据，就像我说的 5 个随机位置一样？

编辑：用于检查示例所做的每个像素：

var imageData = ctx.getImageData(0, 0, width, height);
var inputData = imageData.data;

for(var y = 0; y < height; y++) {
    for (car x = 0; x <width; x++) {
       var r = inputData[i+0];
var g = inputData[i+1];
var b = inputData[i+2];

但我想要的是它确实像下面那样，但在外面有 imageData： 如何读取包含我想要的位置的数组？因为括号里的数字是颜色值类型(r,g,b)

for (var i=0; i<slider; i++)
{
    var objectx = position.getX();
    var objecty = position.getY();
    var imageData = context.getImageData(objectx, objecty, 1, 1).data; 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
}

Answer 1

以下内容很容易做到。

Live Demo

var imageData = ctx.getImageData(0, 0, width, height);
var inputData = imageData.data; 

var pData = (~~objectx + (~~objecty * width)) * 4;
var r = inputData[pData],
    g = inputData[pData + 1],
    b = inputData[pData + 2],
    a = inputData[pData + 3];

~~ 只是一种更快的方式来处理Math.floor。其余的应该是非常不言自明的。只需将objectx 和objecty 更改为您需要的任何值并继续检查inputData，只要图像没有更改，就不需要再次getImageData。