如何从整个图像的缓存像素数据中获取画布ImageData的矩形部分？

Question

使用ctx.getImageData(x, y, w, h)可以检索图像矩形部分的像素数据;

但是我需要对数据的各个部分执行大量检查。每次提取图像数据都很昂贵。因此，我想缓存整个画布imagedata，并有一个函数返回该缓存数据中给定矩形的像素。

换句话说，如果我事先检索了整个画布的图像数据并将其缓存到变量中，那么如何从此缓存中提取像素数据的矩形部分？

非常感谢任何帮助。

Answer 1

以下是解析较大位图数组[rx, ry, rwidth, rheight]的区域的一种方法：

for(var y = ry; ry < (ry + rheight); y++) {
    for(var x = rx; x < (rx + rwidth); x++) {

        var pos = (y * width + x) * 4;  /// for byte arrays
        var pos =  y * width + x;       /// for Uint32 arrays
    }
}

pos是数组中的位置。如果您不需要检查单个组件（或者您可以使用静态32位值进行比较），我建议您在缓冲区上使用Uint32Array视图，这比迭代字节数组要快得多。

然而，对于提取，该区域可能比使用getImageData()慢，因为您需要使用JS进行上述迭代来获取区域，然后再次使用JS迭代解析数据