HTML5 Canvas 图像变色答案

【问题标题】：HTML5 Canvas image discolorationHTML5 Canvas 图像变色
【发布时间】：2014-12-17 11:23:17
【问题描述】：

我注意到 HTML5 Canvas 在使用 drawImage 时会在某些浏览器上添加轻微变色。我知道它发生在 Google Chrome 和 Mozilla Firefox 上。 Internet Explorer 和 Chrome Android 似乎运行良好。这是什么原因造成的？我的上下文globalAlpha 是1.0。变色通常是 1-5 RGB 值关闭。注意使用Canvas的fillRect等没有问题。

进一步检查，这似乎更多是浏览器结合 Photoshop 导出图像的问题，与 Canvas 本身无关。

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");

    var img = new Image();
        img.src = "http://i.imgur.com/NTRjnRb.png";
        img.onload = function(){
            ctx.fillStyle = "#FFF";
            ctx.fillRect(0, 0, 450, 800);
            ctx.drawImage(img, 0, 0);   
        }
</script>

【问题讨论】：

您使用的图片的文件扩展名是什么？
能分享一下相关代码吗？会更容易尝试复制
我使用的是 PNG。 @Parker 当然，已添加到帖子中。
奇怪，看起来 Chrome 正在这样做，即使没有涉及 Canvas。似乎与画布本身无关。
上图，当我在画布上运行它，截取它，并使用颜色选择器对其进行采样时，两种颜色都保持不变。我想知道这是否与原始图像的编码有关。

标签： html image canvas

【解决方案1】：

这是因为颜色管理，与画布无关，而是与图像加载本身有关。当图像加载到内存中时，浏览器会将监视器 ICC 以及嵌入的 ICC（如果有）应用于颜色值。当您下次将图像绘制到画布上时，图像的颜色值已经一成不变。

Chrome 和 FF 直接支持 ICC 配置文件，并将同时使用图像 ICC（如果有）和监视器 ICC 配置文件。

Internet Explorer v9-11 通过 Windows 颜色系统支持 ICC。

除了 ICC 之外，还有可能影响输出端实际颜色值的伽马校正。如果这还不够，那么还有不同版本的 ICC 配置文件，即 v4 还没有提供它现在应该拥有的支持。

ICC profile version test results:

ICC support:           v2     v4

Firefox 34              X      -
Chrome 40 / Opera 25    X      -
Internet Explorer 11    X      X

如您所见，IE 支持版本 2 和 4（尽管通过 Windows 自己的颜色系统），如果您使用 ICC 配置文件版本 4 保存图像，这可以解释这种情况（我目前无法测试 Android Chrome）。

要从 Photoshop 中保存不带 ICC 的 PNG，请使用“保存为网络”并勾选 ICC 嵌入。

如需更深入（来自测试的子链接），您可以查看这篇文章：
Web browser color management guide。

【讨论】：

“保存为网络”完美运行。信息丰富，从不知道图像不仅仅是一些颜色数据。谢谢！
@John 没问题。色彩管理每天都会引起全世界的头痛...... :)