在Javascript中将RGB数组转换为RGBA数组的快速方法

我正在使用的模拟器在内部存储 RGB 值的一维帧缓冲区。但是，HTML5 画布在调用 putImageData 时使用 RGBA 值。为了显示帧缓冲区，我当前循环遍历 RGB 数组并以某种方式创建一个新的 RGBA 数组与此类似 https://stackoverflow.com/a/13826397.

这似乎不太理想。关于快速执行画布绘制已有很多文章，但我仍然不知道如何提高应用程序性能。有什么方法可以更快地将 RGB 数组转换为 RGBA 数组吗？ Alpha 通道始终是完全不透明的。另外，有没有什么方法可以与画布交互，以便它采用 RGB 而不是 RGBA 值的数组？

无法使用纯 RGB，但可以通过删除重复计算、数组引用等来对代码中的循环进行一定程度的优化。

一般来说，你不应该使用ctx.getImageData获取目标缓冲区 - 您通常不关心已经存在并且应该使用的值ctx.createImageData反而。如果可能的话，为每个帧重复使用相同的原始缓冲区。

但是，由于您想将 alpha 值预设为0xff（他们默认为0x00）并且只需要这样做一次，似乎最有效的方法是填充画布，然后使用以下命令获取原始值getImageData.

ctx.fillStyle = '#ffffff'; // implicit alpha of 1
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
dest = ctx.getImageData(0, 0).data

然后对于每个帧，可以只保留 alpha 字节不变：

var n = 4 * w * h;
var s = 0, d = 0;
while (d < n) {
    dest[d++] = src[s++];
    dest[d++] = src[s++];
    dest[d++] = src[s++];
    d++;    // skip the alpha byte
}

您还可以尝试“循环展开”（即在while循环），但不同浏览器的结果会有所不同。

由于您的像素总数很可能是四的倍数，因此只需再重复该块三次，然后while仅对每四个像素副本进行评估。