Javascript 画布图像数据多像素插入

我正在检索画布imagedata中的像素，我经常这样做

我认为从画布imagedata插入和检索画布imagedata在cpu时间上是非常昂贵的，因此我希望尽可能少地插入和检索画布imagedata

切割的一种方法是制作一个插入，在一个序列中插入多个像素，但到目前为止，我还不知道如何做到这一点。到目前为止，我看到的所有示例仅检索和插入一个像素

所以问题是,，

---

为了加快画布imagedata像素操作，如何同时插入/检索多个像素？

检索像素缓冲区时只需选择较大的区域：

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

现在，数据缓冲区将包含给定区域的所有像素。要获取整个画布，请执行以下操作：

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
}

小贴士:

• 如果您计划更新相同的缓冲区，通常只需检索一次缓冲区并存储指向它的指针，在需要时进行更新并放回，然后重用相同的缓冲区。这样可以节省获取缓冲区的时间。如果您同时使用标准方法将图形应用于画布，那么这将不起作用
• 也可以使用

  createImageData（）

  而不是

  getImageData（）

  从空缓冲区开始
• 如果像素颜色数据或多或少是静态的，则可以使用

  uint32阵列

  而不是

  uint8clampedaray

  更新缓冲区。在获取

  imageData

  后，您会得到这样的32位版本：

  var buffer32=新的uint32数组（imageData.data.buffer）
  

新的

buffer32

将指向相同的底层字节缓冲区，因此没有显著的内存开销，但它允许您读取和写入32位值，而不仅仅是8位值。请注意，字节顺序（通常）是小尾端，因此将字节排序为ABGR。然后像以前一样，调用

ctx.putImageData（imageData，x，y）当您需要更新时