Image 画布图像会产生可怕的颜色偏移

画布图像在保存到磁盘或上传到服务器时，会在Chrome和Firefox Mac中产生可怕的颜色变化。Safari具有忠实的色彩。下面的示例+JSFiddle使用原始图像进行复制。注意受试者的脸是如何变得非常橙色的

：：包括有关如何复制的逐步示例图像

代码摘录：

    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中检查图像时，没有一个图像具有嵌入的颜色配置文件。然而，有一些颜色的翻译已经发生了！这似乎不属于未对准轮廓或缺少轮廓的情况

我在下面详细介绍了如何重现这个问题。

---

我最近在浏览器中遇到了类似的颜色偏移现象，JSFIDLE代码可以再现人脸颜色的翻译。经过一些研究，并感谢亚历山大·奥马拉（Alexander O’Mara）提供的图像中的颜色配置建议，以下是我的结论：

这种现象应该是由样本图像中嵌入的颜色轮廓引起的。如果在photoshop中打开原始图像，它将显示一个警告窗口，指示颜色配置文件与当前使用的色域不匹配，可以选择三个选项：

简而言之，使用嵌入式颜色配置文件，我们称之为ref_ICC 将颜色转换为当前使用的色域转换后，新的ICC（即con_ICC）将嵌入到生成的图像中 忽略颜色配置文件 通过选择相应的选项保存这三幅图像后，让我们在一些图像查看器中打开它们。我使用XnView检查图像中是否嵌入了颜色配置ICC，并使用Photoshop检查RGB直方图。结果是： 下载的*代表由canvas.toDataURL的JSFIDLE代码获得的图像

          | 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与下载的选项1看起来不同，在下载的选项1中，直方图似乎是通过浏览器以类似于photoshop对选项2所做的方式进行转换的。另一方面，选项1和3以及选项2和下载的图像对显示相同的显示值

---

如果在photoshop中查看图像，则选项1和2下载的三个图像显示相同的显示值。作为最后的对比，下载图像在FastStone和Photoshop中的显示值相同，虽然原始图像在这两个查看器中显示不同的显示值。

您能提供一个您有此问题的图像供我们测试吗？@AlexanderO'Mara测试图像在这里：测试图像在我的测试中也可用：啊，一定错过了。我正在尝试它，它在Firefox中看起来不像Safari在你的屏幕截图中那样橙色。你如何比较它们？如果您直接在Firefox中打开图像，或者仅在绘制到画布上时，它看起来是橙色的吗？保存后它在画布上看起来是橙色的，还是两者都是？将画布元素保存到磁盘并在Photoshop中打开它。如果您在Firefox中创建画布图像，它在屏幕上看起来是一样的。如果您将映像保存到服务器或本地磁盘，并在Safari中查看，则颜色将发生变化。Safari的颜色渲染与实际的图像数据没有问题，在photoshop中打开图像会显示颜色已经改变。