HTML5画布图像变色问题

Question

HTML5画布图像变色问题

3

我注意到在某些浏览器上使用drawImage时，HTML5 Canvas会产生轻微的色差。我知道在Google Chrome和Mozilla Firefox上会出现这种情况。Internet Explorer和Chrome Android似乎工作正常。是什么原因导致了这种情况？我的context的globalAlpha是1.0。通常情况下，色差为1-5个RGB值。请注意，在使用Canvas的fillRect等功能时没有任何问题。

经过进一步检查，看起来这更多是浏览器与Photoshop导出图像相结合的问题，与Canvas本身无关。 Color comparison

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>

- John

奇怪，看起来Chrome甚至在没有涉及Canvas的情况下也会这样做。似乎与Canvas本身无关。 - John

上面的图片，当我通过画布运行它、截屏并使用取色器进行采样时，两种颜色都保持不变。我想知道这是否与原始图像的编码有关。 - tbh__

当运行此代码并检查颜色时，它看起来是相同的。请查看此链接：https://dev59.com/3Gs05IYBdhLWcg3wANPj - tbh__

这个链接对你有帮助吗？它涉及到不同浏览器中图像颜色差异的问题。 - Parker

运气不太好。可能可以通过更改一些 Photoshop 设置来修复它。BMP 在颜色方面看起来很好（但显然不适合实际使用）。尝试调整颜色设置，但似乎没有起作用，可能操作不正确。MS Paint 可以正常保存 PNG，浏览器中也没有变色。 - John

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1693593 · Accepted Answer

这是由于颜色管理问题，与canvas无关。当图像被加载到内存中时，浏览器会将监视器ICC和嵌入式ICC（如果有）应用到颜色值上。当您下次将图像绘制到canvas上时，图像的颜色值已经固定下来。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中的菜单快照

对于更深入的了解（从测试的子链接），您可以参阅此文章：
网络浏览器颜色管理指南。