HTML5画布图像变色

我注意到当使用drawImage时，HTML5画布在某些浏览器上添加了轻微的变色。我知道这发生在Google Chrome和Mozilla Firefox上。 Internet Explorer和Chrome Android似乎工作正常。这是什么造成的？我的情况是globalAlpha是1.0。变色通常是1-5个RGB值。请注意，使用Canvas' fillRect等HTML5画布图像变色

经进一步检查时，看起来这是更多的从浏览器使用Photoshop相结合的问题导出的图像，并就无关紧要了，画布本身是没有问题的。

Color comparison 变种画布=的document.getElementById（ “画布”）; 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>

来源

2014-10-22 John

什么是您所使用的图像的文件扩展名？ – 2014-10-22 04:12:15

你能分享相关的代码吗？将使它更容易尝试重现 – Parker 2014-10-22 04:15:49

我正在使用PNG。 @Parker当然，添加到帖子。 – John 2014-10-22 04:15:50

这是因为颜色管理，与画布无关，而是与图片加载本身无关。当图像被加载到内存中时，浏览器会将监视器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，请使用“Save for web”并勾选ICC嵌入。

menu snapshot from PS

为了更深入地（从测试子链接），你可以看到这篇文章：
Web browser color management guide。

来源

2014-10-22 04:45:53 K3N

“保存为网络”完美地工作。信息丰富，从来不知道图像不仅仅是一些颜色数据。谢谢！ – John 2014-10-22 04:53:14

@约翰没问题。色彩管理每天都会引起世界各地的头痛...... :) – K3N 2014-10-22 04:56:22

HTML5画布图像变色

回答

相关问题