Canvas PutImageData颜色损失，没有/低alpha [英] Canvas PutImageData color loss with no/low alpha

问题描述

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

There's a 3x3 image. The CanvasPixelArray is:

[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，然后返回：

I change the alpha of all pixels to 0 and back by:

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)

所有像素变为黑色。浏览器将颜色改为黑色，以节省内存。有没有办法防止这种情况或者我应该保存一个重复吗？

All pixels became black. The browser changed the colors to black to save memory. Is there a way to prevent this or should I save a duplicate?

推荐答案

我认为这样做的原因是Canvas使用precultiplied alpha，意味着所有rgb值都乘以那些像素的alpha值。

I think the reason for this is that Canvas uses premultiplied alpha, meaning all rgb values are multiplied by the alpha value for those pixels. It's done to speed up alpha blending with backgrounds, etc.

这篇文章中有一个关于预乘α的部分： wikipedia：Alpha_compositing

There's a section on premultiplied alpha in this article: wikipedia:Alpha_compositing

你可能要么，因为你说保留一份未修改的值，或者可能存储图像的alpha值，并在绘制图像之前设置globalAlpha属性。
（当我说图像，你可以同样创建一个3x3画布，存储像素，并使用drawImage（）来绘制到主画布）。

You'll probably have to either, as you say keep a copy of the unmodified values, or perhaps store an alpha value for the image and set the globalAlpha property before drawing the image. (When I say image, you can equally create a 3x3 canvas, store the pixels there and use drawImage() to draw it to the main canvas).

这篇关于Canvas PutImageData颜色损失，没有/低alpha的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！