Question

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

进一步检查后，浏览器结合Photoshop导出的图像看起来更像是一个问题，与Canvas本身无关。

Color comparison var canvas = document.getElementById（＆＃34; canvas＆＃34;）; var ctx = canvas.getContext（＆＃34; 2d＆＃34;）;

    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>

Answer 1

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

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

Internet Explorer v9-11通过Windows Color系统支持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嵌入。

menu snapshot from PS

有关更深入的内容（测试中的子链接），您可以看到这篇文章：
Web browser color management guide

HTML5 Canvas图像变色

1 个答案: