Question

我有一个2像素的PNG图像，其中包含以下rgba：

image.setAt(0, 0, { red:255, green:10, blue:10, alpha:100 });
image.setAt(1, 0, { red:255, green:255, blue:55, alpha:255 });
image.setAt(0, 1, { red:90, green:10, blue:65, alpha:250 });
image.setAt(1, 1, { red:60, green:255, blue:0, alpha:14 });

（使用节点的pngjs-image模块）

当浏览器（firefox）加载图像并将其复制到画布以测试rgba数据时，将返回以下内容：

255 7 7 100 
255 255 55 255 
89 9 64 250 
54 255 0 14

似乎只保留Alpha通道值，而像素颜色可以任意改变。

发生了什么事？

（在Linux上使用Firefox 41）

修改

从pngtoy nodejs模块的介绍我发现了以下内容：

使用PNG文件解析器/读取器/解码器的低级实现   客户端大小的JavaScript。

为什么浏览器支持PNG时会出现这种情况？

浏览器只需加载任何PNG类型并将其转换为RGBA   位图。它还将ICC和伽玛校正应用于图像   导致与原始位图中的值不同。

但是，我认为PNG本身应该有ICC和Gamma校正块，以便浏览器应用它们。即使文件中没有ICC / gamma块，浏览器是否对任何png文件进行了这样的图像处理？

Answer 1

Firefox将带有alpha的图像转换为预乘的alpha以供内部使用。如果您的工作流程正在从Firefox的内部图像缓冲区恢复图像，则在反转预先加倍的alpha时会丢失精度。在极端情况下，无论原始PNG中的底层颜色如何，alpha等于零的像素都将返回为透明黑色。此效果不取决于是否存在色彩管理块。

请注意，单击PNG图像并“另存为...”时不会发生这种情况;在这种情况下，返回原始PNG。

当存在色彩管理块（iCCP，sRGB，gAMA和/或cHRM）时，Firefox也可以修改内部图像（取决于“about：config”中gfs.color_management.mode的设置），但是似乎不是这个特定问题的情况。同样，“另存为...”将返回原始像素，颜色管理块保持不变。

显示时浏览器是否更改了png rgba数据？

1 个答案: