Javascript 当alpha透明时,HTML5画布到PNG会将所有通道归零

Javascript 当alpha透明时,HTML5画布到PNG会将所有通道归零,javascript,png,html5-canvas,Javascript,Png,Html5 Canvas,我有一个UINT32数组,我正在尝试转换为WebGL的纹理。为此,我将数组作为RGBA值写入画布,并从画布获取base64编码的PNG作为纹理发送 每当我将像素值设置为alpha为0时,相应的RGB通道在转换为PNG时也会归零。这是一个实现细节吗?如果我要在其他非HTML5程序中创建PNG,我能拥有(255255,0)的(RGBA)四元组吗?我尝试使用alpha值1,所有其他通道保持不变,因此这不是预乘alpha的问题 下面是一些javascript代码来重现这种效果: var img

我有一个UINT32数组,我正在尝试转换为WebGL的纹理。为此,我将数组作为RGBA值写入画布,并从画布获取base64编码的PNG作为纹理发送

每当我将像素值设置为alpha为0时,相应的RGB通道在转换为PNG时也会归零。这是一个实现细节吗?如果我要在其他非HTML5程序中创建PNG,我能拥有(255255,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;
var img=newimage();
var canvasObj=$('');
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;
putImageData(imgd,0,0);
img.src=canvasObj[0].toDataURL(“image/png”);
背景图像(img,0,0);
var imgd2=context.getImageData(0,0,1,1);
var pix2=imgd2.0数据;
pix2将全部为0


谢谢

它似乎是PNG规范的一部分()

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


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

还有另一个问题。显然,当你用非预乘的alpha从画布生成PNG时,它首先乘以alpha,然后除以alpha(为什么我不知道)。@Bill和他们声称无损压缩!在保存数据时,这显然是对混合通道的有损压缩。