Canvas PutImageData颜色丢失，无/低alpha

2011-05-04 58 views 2 likes

有3x3图像。该CanvasPixelArray是：Canvas PutImageData颜色丢失，无/低alpha

[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)

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

来源

2011-05-04 bopjesvla

你能详细解释一下上下文吗？你需要在哪里使用这个？在http://jsfiddle.net/上有一个具体的例子可能会很酷。 – 2011-05-07 06:29:37

回答

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

有这篇文章在预乘alpha的一个部分：wikipedia:Alpha_compositing

你可能不得不要么，就像你说的保持未修改值的副本，或者可能会存储图像的Alpha值，并在绘制图像之前设置globalAlpha属性。（当我说图像时，您可以同样创建一个3x3的画布，将像素存储在那里，并使用drawImage（）将其绘制到主画布上）。

来源

2011-08-25 14:39:00 andrewmu

那么这是一个浏览器错误，还是HTML5 canvas规格允许由于预乘alpha处理而导致颜色丢失？ – Chris 2012-02-07 20:34:12

不要紧，规范允许，http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html：“由于转换为和有损的性质从预乘alpha颜色值，刚刚使用putImageData（）设置的像素可能会以不同的值返回到等效的getImageData（）。“ – Chris 2012-02-07 20:37:07

Canvas PutImageData颜色丢失，无/低alpha

回答

相关问题