Question

我正在尝试使用putImageData（）在HTML画布中设置单个像素。当我这样做然后使用getImageData（）立即读回这些像素时，我刚刚设置的RBG值已经改变了！见例：

var ct = canvas.getContext('2d');
var image = ct.getImageData(0,0,1,1);
var data = image.data;

data[0] = 200; //r
data[1] = 100; //g
data[2] = 50; //b
data[3] = 25; //a

console.log(data); //[200, 100, 50, 25]  Yeah :)

ct.putImageData(image,0,0);
var debug = ct.getImageData(0,0,1,1);

console.log(debug.data); //[204, 102, 51, 25] Boo :(

如果我将alpha通道设置为255（无透明度），则不会更改RGB值。如果我将alpha通道设置为0（透明），那么RGB将返回0,0,0。显然它与透明度有关。它可能与RGB色彩空间和数学有关。

我试图弄清楚为什么会发生这种情况或者至少能够以某种方式预测结果。有人可以告诉我这里发生了什么事吗？

Answer 1

这是由于合成过程，特别是预乘alpha通道。 standard states：

由于转换为预乘alpha的有损性质颜色值，刚刚使用putImageData（）设置的像素可能会返回到等效的getImageData（）作为不同的值。

这是一个相对深入而广泛的主题，但如果你想深入了解其背后的数学细节，我建议你看一下在this链接上找到的Porter-Duff算法。特别参见混合和alpha合成。还考虑到浏览器在这些公式中使用8位整数值。

带有透明度的HTML Canvas putImageData会导致保存不正确的RGB

1 个答案: