我注意到在使用 drawImage 时，HTML5 Canvas 在某些浏览器上添加了轻微的变色。我知道它发生在 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>
最佳答案
这是因为颜色管理，与 Canvas 无关，而是与图像加载本身有关。当图像加载到内存中时，浏览器将应用监视器 ICC 以及嵌入式 ICC(如果有)到颜色值。当您下次将图像绘制到 Canvas 时，图像的颜色值已经确定。
Chrome 和 FF 直接支持 ICC 配置文件，并将使用图像 ICC(如果有)和显示器 ICC 配置文件应用。
Internet Explorer v9-11 通过 Windows 颜色系统支持 ICC。
除了 ICC 之外，还有 Gamma 校正，它也可能影响输出端的实际颜色值。如果这还不够，那么还有不同版本的 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，请使用“保存为 web”并勾选 ICC 嵌入。
更深入的(来自测试的子链接)你可以看这篇文章:
Web browser color management guide .
关于HTML5 Canvas 图片变色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26500194/