画布图像产生可怕的颜色变化答案

【问题标题】：Canvas image produces awful color shifts画布图像产生可怕的颜色变化
【发布时间】：2015-03-23 19:27:37
【问题描述】：

当保存到磁盘或上传到服务器时，Canvas 图像在 Chrome 和 Firefox (Mac) 中会产生可怕的颜色变化。 Safari 拥有忠实的色彩。下面的示例 + JSFiddle 用原始图像重现。请注意拍摄对象的脸是如何变得非常橙色的。

http://jsfiddle.net/E4yRv/141/ :: 包括有关如何重现的示例图片的分步说明

代码摘录：

    canvas.ondrop = function(e) {
    e.preventDefault();
    var file = e.dataTransfer.files[0],
        reader = new FileReader();
    reader.onload = function(event) {
        var img = new Image(),
            imgStr = event.target.result,
            imgData = context.getImageData(0,0, context.width,context.height);
        state.innerHTML += ' Img source dropped in: <a href="' +
            imgStr + '" target="_blank">save image</a><br />';
        img.src = event.target.result;
        img.onload = function(event) {
            context.height = canvas.height = this.height;
            context.width = canvas.width = this.width;
            context.drawImage(this, 0, 0);
            state.innerHTML += ' Canvas img drawn: <a href="' + canvas.toDataURL("image/jpeg", 1.0) + '" target="_blank">save canvas</a> <br />*add .jpg extension when saving';
        };
    };
    reader.readAsDataURL(file);
    return false;
};

当画布在各自的浏览器中绘制图像时，颜色渲染以匹配原始颜色。但是，如果将图像保存到本地磁盘并在 Photoshop（唯一知道如何真正处理颜色的程序）中查看，颜色就会发生变化！如果在不同的浏览器中查看保存的文件，也会发生同样的情况。

在 Photoshop 中检查图像，没有嵌入颜色配置文件。但是，发生了一些颜色的翻译！这似乎不是配置文件未对齐或缺少配置文件的情况。

我在下面制作了一个详细的 JS-Fiddle，说明如何重现该问题。 http://jsfiddle.net/E4yRv/141/

【问题讨论】：

您能否提供一张您遇到此问题的图片供我们测试？
@AlexanderO'Mara 测试图片在这里：i.imgur.com/1UAqEU4.jpg
测试图片也可以在我这里测试：jsfiddle.net/E4yRv/141
啊，一定是错过了。我正在尝试它，它在 Firefox 中看起来不像在 Safari 中那样橙色，就像在你的屏幕截图中那样。你如何比较它们？如果您直接在 Firefox 中打开图像，或者仅在绘制到画布上时，它是否看起来是橙色的？保存后，它在画布上是橙色的，还是两者兼而有之？
将画布元素保存到磁盘并在 Photoshop 中打开。如果您在 Firefox 中创建画布图像，它在屏幕上看起来是一样的。如果您保存图像（到服务器或本地磁盘）并在 Safari 中查看它，颜色将会发生变化。 Safari 使用实际图像数据进行颜色渲染不是问题，在 Photoshop 中打开图像会显示颜色发生了变化。

标签： image firefox canvas html5-canvas filereader

【解决方案1】：

我最近在浏览器中遇到了类似的色偏现象，通过JSFiddle代码可以重现人脸颜色的翻译。经过一些研究并感谢 Alexander O'Mara 提供的建议（图像中的颜色配置文件），这是我的结论：

该现象应该是由示例图像中嵌入的颜色配置文件引起的。如果在photoshop中打开原图，会出现一个警告窗口，提示颜色配置文件与当前使用的色域不匹配，可以选择三个选项：

使用嵌入式颜色配置文件（简而言之，我们称之为 ref_ICC）
将颜色转换为当前使用的色域（转换后，新的 ICC，即 con_ICC，将嵌入到结果图像中）
忽略颜色配置文件

通过选择相应的选项保存三个图像后，让我们在一些图像查看器中打开它们。我使用 XnView 检查图像中是否嵌入了任何颜色配置文件 (ICC)，并使用 Photoshop 检查 RGB 直方图。结果是：（下载的*代表canvas.toDataURL的JSFiddle代码获取的图片）

          | option 1 | option 2 | option 3 | downloaded*
histogram | ref_hist | con_hist | ref_hist | con_hist
ICC       | ref_ICC  | con_ICC  |    X     |    X

在不关心颜色配置文件 (ICC) 的查看器（例如 FastStone）中，显示的 RGB 值仅取决于直方图。所以原始图像（选项 1）看起来与下载的不同，其中直方图似乎由浏览器以类似于选项 2 的 photoshop 的方式转换。另一方面，“选项 1 的图像对& 3" 和 "option 2 & deleted" 显示相同的显示值。

如果在 Photoshop 中查看图像，则三个图像（选项 1 和 2 和下载）显示相同的显示值。最后对比一下，下载的图片在 FastStone 和 Photoshop 中的显示值是一样的，而原图在这两个查看器中显示的值不同。

【讨论】：