无/低 alpha 的 Canvas PutImageData 颜色丢失

Question

有一张 3x3 的图片。 CanvasPixelArray 是：

[12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255]

我将所有像素的 alpha 更改为 0 并返回：

bobs = this.gfx.getImageData(0,0,3,3).data
for (a=3;a<bobs.data.length;a+=4)
bobs.data[a] = 0
this.gfx.putImageData(bobs,0,0)
bobs = this.gfx.getImageData(0,0,3,3).data
for (a=3;a<bobs.data.length;a+=4)
bobs.data[a] = 255
this.gfx.putImageData(bobs,0,0)

所有像素都变黑了。浏览器将颜色更改为黑色以节省内存。有没有办法防止这种情况发生或者我应该保存一个副本？

Answer 1

我认为这样做的原因是 Canvas 使用预乘 alpha，这意味着所有 rgb 值都乘以这些像素的 alpha 值。这样做是为了加快 alpha 与背景等的混合。

本文中有一段关于预乘 alpha 的部分：wikipedia:Alpha_compositing

正如您所说，您可能必须保留未修改值的副本，或者可能存储图像的 alpha 值并在绘制图像之前设置 globalAlpha 属性。 （当我说图像时，您同样可以创建一个 3x3 画布，将像素存储在那里并使用 drawImage() 将其绘制到主画布上）。