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

我试图使用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颜色空间和数学有关

---

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

这是由于合成的过程，特别是对alpha通道的预乘。委员会：

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

---

这是一个相对深入和广泛的话题，但如果你想深入了解其背后的数学细节，我建议你看看link上的波特-达夫算法。具体请参见混合和alpha合成。还考虑到浏览器在这些公式中使用8位整数值。

当alpha为零时，RGB将在您将其放回画布时归零。没有任何方法可以防止这种情况。@Blindman67，您可以改为设置alpha 1。但它仍然会失去原来的RGB。+1溃烂的伤口，这就是W3C为什么他们要标准化基于30年历史和有缺陷的论文的当代软件。RGB值是对数的，Porter-Duff算法是线性的。如果没有人抱怨，我想一切都不会改变…@Blindman67好吧，我突然觉得自己老了，因为我记得这是什么时候开始泄漏到小型计算机上的（genlocks、32位卡等）：）但公平地说，它们确实通过gamma或ICC转换为线性。可以考虑XYZ颜色空间，但它的计算量更大。我有一种感觉，我们将被困多年（顺便说一句，感谢投票）。在这里，时光飞逝1984年，我仍然对我的8位6502和6401位高分辨率的原始能力感到敬畏。根洛克！！这是百万富翁和电视台的东西…1984年这里也是，还有6502年，但我的被困在一个VIC20里，有着光荣的4k和22个字符宽。我的16k盒式磁带谈判失败，但后来我得到了一个深奥的Spectravideo 328mkII。几年后，随着Amiga的出现，genlock的东西出现了。我最初的一些自由职业者任务是在电视台。他们有像SGI Onyx2和Quantel Paintbox这样的玩具，还有一个带genlock的Amiga。视频烤面包机不适用于PAL IIRC，所以这是一种替代品。但是我喜欢Amiga，有很多有趣的回忆。哈哈，第二年我搬到了Atari800XL，时钟慢了，但图形效果更好，然后是Amiga。找到了一份为当时最好的机器Amiga编写游戏的工作，然后进入arcade design和IMOS T800的16个CPU，每个CPU 20-25Mhz（简直让人难以触摸），3-34010图形芯片，可容纳360MIPS和38mb内存，并装入三个12Mhz 286机箱中，除了IO和电源之外什么都没有。我的简介是：“让我们看看它能做什么！”。是的，有趣的回忆。很高兴收到一位同事的来信……：）