为什么浏览器在 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 观察到的十六进制代码。背景是透明的，所以灰色/黑色只是浏览器显示透明度的不同。

橙色：

蓝色：

绿色：

红色：

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：