HTML5画布到PNG在alpha透明时将所有通道归零

HTML5 Canvas to PNG zeroes all channels when alpha transparent

本文关键字：归零 通道 透明 alpha PNG HTML5      更新时间：2023-12-22

我有一个Uint32Array，我正试图转换为WebGL的纹理。为了做到这一点，我将数组作为RGBA值写在画布上，并从画布中获得一个base64编码的PNG作为纹理发送。

每当我将像素值设置为alpha为0时，相应的RGB通道也会在转换为PNG时归零。这是一个实施细节吗？如果我在其他一些非HTML5程序中创建PNG，我能拥有（255255255,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。

谢谢！

它似乎是PNG规范的一部分(http://www.libpng.org/pub/png/spec/1.2/png-1.2-pdg.html)。

应为所有完全透明的像素分配相同的像素最佳压缩的颜色值。

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

相关文章：