HTML5画布图像变色

debugcn 发表于 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>

用户名

This is because of color management and is not related to canvas but to the image loading itself. When an image is loaded into memory the browser will apply monitor ICC as well as embedded ICC if any, to the color values. When you next draw the image to canvas the color values of the image is already set in stone.

Chrome and FF support ICC profiles directly and will apply using both image ICC (if any) and monitor ICC profile.

Internet Explorer v9-11 supports ICC through the Windows Color system.

In addition to ICC there is gamma correction which also may affect the actual color values in the out end. If that wasn't enough then there are different versions of ICC profiles, ie v4 does not have quite the support it should have by now.

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

PS中的菜单快照

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

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

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

编辑于2021-06-8

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章