为什么浏览器在png中显示的颜色不同？

Question

我有一个应用程序，可以从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（关闭）
• Firefox：＃f08327

蓝色：

• 期望：＃1f77b4
• Chrome浏览器：＃1f77b4（匹配）
• Firefox：＃3877b1

绿色：

• 期望：＃2ca02c
• Chrome浏览器：＃2ca02b（关闭）
• Firefox：＃549d39

红色：

• 期望：＃d62728
• Chrome浏览器：＃d62627（关闭）
• Firefox：＃c4352b

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

任何有关我可以做canvas.getDataURL（）方法的想法的想法都会返回base64 png，该png的颜色将与绘制在其上的颜色相匹配？

Answer 1

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

Answer 2

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