为啥浏览器在 png 中显示颜色的方式不同？

Posted 2023-03-28

【中文标题】为啥浏览器在 png 中显示颜色的方式不同？

【英文标题】：Why are browsers displaying the colors in a png differently?为什么浏览器在 png 中显示颜色的方式不同？

【发布时间】：2019-09-30 21:54:07

【问题描述】：

我有一个应用程序可以从 html 画布上的绘图生成 base64 png。

我发现在使用滴管扩展程序查看颜色时，Chrome 和 Firefox 之间的颜色不同。 这两种浏览器的颜色都与我在画布上绘制的实际颜色不完全匹配（Chrome 匹配一种颜色）。

首先，我在 Firefox 的画布上绘制，得到 base64 png 字符串。

我在 Chrome 和 Firefox 中都在这里解码了 base64：http://freeonlinetools24.com/base64-image

请注意，我解码了完全相同的 base64 字符串（在 FF 中生成），但解码时得到了 2 个不同的结果图像。

您可以使用任何颜色选择器扩展来查看颜色十六进制代码或 RGB 值的差异。

这里是所有颜色，包括我在画布上实际绘制的十六进制代码，以及 Chrome 和 Firefox 观察到的十六进制代码。背景是透明的，所以灰色/黑色只是浏览器显示透明度的不同。

橙色：

预期：#ff7f0e Chrome：#ff7f0c（关闭） 火狐：#f08327

蓝色：

预期：#1f77b4 Chrome：#1f77b4（匹配） 火狐：#3877b1

绿色：

预期：#2ca02c Chrome：#2ca02b（关闭） 火狐：#549d39

红色：

预期：#d62728 铬：#d62627（关闭） 火狐：#c4352b

我不明白为什么 base64 png 不会在任何浏览器中变成完全相同的 RGB 值。

我可以做些什么来使 canvas.getDataURL() 方法返回一个 base64 png，它的颜色与绘制在上面的颜色相匹配？

【问题讨论】：

Is canvas getImageData method machine/browser dependent?的可能重复

【参考方案1】：

我缩小了问题的范围。如果我有一个带有 img 标记的页面并将 img 标记的 src 设置为我的图像，颜色将在不同的浏览器中呈现不同。

【参考方案2】：

总的来说canvas.getDataURL() 返回一个不同的图像，它至少在质量和类型上与原始图像不同。要获取原始 Base64 值，请使用 XMLHttpRequest + btoa 或 FileReader.readAsDataURL()。