带有 imageData 的 UInt32 数组算术

如何解决带有 imageData 的 UInt32 数组算术

我想用两个大图像的画布创建可视化效果，因此需要操作 imageData。

我已经可以使用了，但是速度很慢：

const ctx = document.createElement("canvas").getContext("2d")
const w = ctx.canvas.width
const h = ctx.canvas.heigh

for(let x = 0; x <= w; x++){
  for(let y = 0; y <= h; y++) {
    const red = y * (w * 4) + x * 4
    const green = red + 1
    const blue = red + 2
    const alpha = red + 3

    imageData.data[red]    = ((1.0 * this.originalImageData.data[red]   + 1.0 * this.labelImageData.data[red])   / 2.0) % 256
    imageData.data[green]  = ((1.0 * this.originalImageData.data[green] + 1.0 * this.labelImageData.data[green]) / 2.0) % 256
    imageData.data[blue]   = ((1.0 * this.originalImageData.data[blue]  + 1.0 * this.labelImageData.data[blue])  / 2.0) % 256
    imageData.data[alpha]  = ((1.0 * this.originalImageData.data[alpha] + 1.0 * this.labelImageData.data[alpha]) / 2.0) % 256
  }
}

ctx.putimageData(imageData,0)

阅读 Faster Canvas Pixel Manipulation with Typed Arrays 后，我想尝试将其转换为使用 UInt32 数组。不幸的是，这篇文章只讨论了写入值，而不是读取它们或对两个数组执行算术运算，我似乎找不到关于这样做的好文档。

从上面例子中的两个原始 imageData 数组中读取数据，然后按照文章中的描述设置它们可以工作，但仍然很慢，因为我仍然需要分别访问每个像素的所有通道>

const redValue = ((1.0 * this.originalImageData.data[red] + 1.0 * this.labelImageData.data[red])   / 2.0) % 256
const greenValue = ((1.0 * this.originalImageData.data[green] + 1.0 * this.labelImageData.data[green]) / 2.0) % 256
const blueValue = ((1.0 * this.originalImageData.data[blue] + 1.0 * this.labelImageData.data[blue]) / 2.0) % 256
const alphaValue = ((1.0 * this.originalImageData.data[alpha]+ 1.0 * this.labelImageData.data[alpha]) / 2.0) % 256

const index = y * w + x

data[y * w + x] =
    (alphaValue << 24) |
    (blueValue << 16) |
    (greenValue <<  8) |
    redValue

谁能帮我直接在 Uint32 数组上执行这些（和其他）操作以加快速度？

PS：我知道这也可以通过画布上的混合选项来实现，但是我还有其他的可视化效果是不可能的，例如将每个半透明像素着色为红色，使其可见。