HTML5画布图像变色

john 发表于 Dev

约翰

我注意到，使用时，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>

用户名

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

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

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

除ICC之外，还有伽玛校正，这也可能影响输出端的实际颜色值。如果这还不够的话，那么会有不同版本的ICC配置文件，即v4到目前为止还没有应有的支持。

ICC配置文件版本测试结果：

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嵌入。

PS中的菜单快照

有关更深入的内容（该测试的子链接），请参阅本文：
Web浏览器颜色管理指南。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-14

我来说两句

0条评论

登录后参与评论

上一篇：Xcode 6.1中的Mach-O链接器错误

来自分类Dev