javascript - Canvas 图像数据多像素插入

Question

我正在检索 Canvas 图像数据中的像素，并且我经常这样做。

我认为在 Canvas 图像数据中插入和检索的 CPU 时间成本很高，因此我希望尽可能少地进行这些操作。

一种切割方法是制作一个插入件，在单个序列中插入多个像素，但到目前为止我还无法看到这是如何完成的。到目前为止我看到的所有示例都只检索和插入一个像素。

所以问题是，为了加速 Canvas 图像数据像素操作，如何同时插入/检索多个像素？

Answer 1

检索像素缓冲区时只需选择更大的区域:

var imageData = ctx.getImageData(x, y, width, height);
                                       ^^^^^^^^^^^^ not limited to one

现在您的数据缓冲区将包含给定区域的所有像素。要获取整个 Canvas :

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

调整它们并放回相同位置:

ctx.putImageData(imageData, x, y);

你就完成了。

请记住，每个像素由四个字节 (RGBA) 组成。要处理更大的缓冲区，您可以执行以下操作:

function getPixelIndex(x, y) {
    return (y * width + x) * 4; // width used when getting buffer
}

提示:

• 如果您计划更新相同的缓冲区，通常只需检索一次缓冲区并存储指向它的指针，在需要时更新它并放回，然后重新使用相同的缓冲区。这样您就可以节省获取缓冲区的时间。如果您同时使用标准方法将图形应用到 Canvas 上，这将不起作用。
• 您还可以使用 createImageData() 从空缓冲区开始而不是getImageData() .

• 如果您的像素颜色数据或多或少是静态的，您可以使用 Uint32Array 更新缓冲区。而不是 Uint8ClampedArray 。获取 imageData 后，您将获得像这样的 32 位版本:

  var buffer32 = new Uint32Array(imageData.data.buffer);

您的新buffer32将指向相同的底层字节缓冲区，因此没有显着的内存开销，但它允许您读取和写入 32 位值，而不仅仅是 8 位值。请注意，字节顺序(通常)是小端字节序，因此将字节排序为 ABGR。然后像以前一样，调用ctx.putImageData(imageData, x, y);当您需要更新时。