javascript - 具有透明度的 HTML Canvas putImageData 导致保存不正确的 RGB

Question

我正在尝试使用 putImageData() 在 HTML Canvas 中设置单个像素。当我执行此操作并立即使用 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 channel 设置为 255(无透明度)，则 RGB 值不会改变。如果我将 alpha channel 设置为 0(透明)，则 RGB 返回为 0,0,0。显然这与透明度有关。它可能与 RGB 颜色空间和数学有关。

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

Answer 1

这是由于合成过程，特别是预乘 alpha channel 。 standard states :

Due to the lossy nature of converting to and from premultiplied alpha colour values, pixels that have just been set using putImageData() might be returned to an equivalent getImageData() as different values.

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