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

【问题标题】：Is png rgba data changed by a browser when displayed?显示时浏览器是否更改了png rgba数据？
【发布时间】：2023-03-13 00:57:02
【问题描述】：

我有一个带有以下 rgba 的 2 像素 PNG 图像：

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）加载并复制到canvas上测试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 文件进行此类图像处理？

【问题讨论】：

Firefox 的行为取决于 about:config 中的 gfx.color_manangement.mode 设置（默认为 2，尝试将其重置为 0 看看会发生什么），以及您的 2x2 图像是否包含颜色管理信息（gAMA、sRGB、cHRM 和/或 iCCP 块）。如果您发布实际 PNG 文件的副本会很有帮助。
我稍后会放原始日期。玩gfx没有成功。 PNG 中没有其他数据：内部只有 IHDR、IDAT 和 IEND 块。
OK 消除了颜色管理。剩下的是可能转换为预乘 alpha 并返回。如果您有一个 alpha==0 的彩色像素会发生什么？
如果 alpha 为 0，则彩色像素设置为 0,0,0...

标签： firefox png alpha rgba

【解决方案1】：

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

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

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

【讨论】：