HTML5画布转为PNG格式时，当透明度为alpha时所有通道值都变成了零

Question

我有一个Uint32Array，我正在尝试将其转换为WebGL纹理。为了实现这一点，我将数组写入Canvas上的RGBA值，并从Canvas获取一个base64编码的PNG以作为纹理发送。

每当我将像素值设置为alpha为0时，在转换为PNG时相应的RGB通道也被清零。这是实现细节吗？如果我在其他非HTML5程序中创建PNG，是否可以拥有（255,255,255,0）的（RGBA）四元组？ 我尝试使用alpha值1，所有其他通道保持不变，因此这并不是预乘Alpha的问题。

以下是一些JavaScript代码来重现此效果：

    var img = new Image();
    var canvasObj = $('<canvas width="1" height="1"></canvas>');
    var context = canvasObj[0].getContext('2d');
    var imgd = context.getImageData(0,0,1,1);
    var pix = imgd.data;
    pix[0]=255; pix[1]=255; pix[2]=255; pix[3]=0;
    context.putImageData(imgd,0,0);
    img.src = canvasObj[0].toDataURL("image/png");

    context.drawImage(img,0,0);
    var imgd2 = context.getImageData(0,0,1,1);
    var pix2 = imgd2.data;

pix2将全为0。

谢谢！

- fuzic

Answer 1

看起来这是PNG规范的一部分（http://www.libpng.org/pub/png/spec/1.2/png-1.2-pdg.html）。

...为了最佳压缩效果，所有完全透明的像素都应该分配相同的颜色值。

我找不到直接的来源，但似乎这个特定的实现将所有通道都设置为零。

- Bill

---

还有另一个问题。显然，当您从具有非预乘 alpha 的画布生成 PNG 时，它首先乘以 alpha 然后除以 alpha（我不知道为什么）。 - fuzic

@Bill 他们声称这是无损压缩！但是当保存数据时，以这种方式混合通道显然是有损压缩。 - user877329