Canvas image produces awful color shifts - image

Question

Canvas image produces awful color shifts in Chrome and Firefox (Mac) when saved to disk or uploaded to server. Safari has faithful color. Examples below + JSFiddle to reproduce with original image. Notice how the subject's face becomes very orange.
http://jsfiddle.net/E4yRv/141/
:: Includes step-by-step with sample images on how to reproduce
Code Excerpt:
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: save canvas <br />*add .jpg extension when saving';
};
};
reader.readAsDataURL(file);
return false;
};
When canvas draws the image in the respective browser the color renders to match the original. However, if the image is saved to disk locally and viewed in Photoshop (the only program that knows how to true handle color) the colors have shifted! Same occurs if viewing the saved file in a different browser.
Inspecting the images in photoshop, none have an embedded color profile. However, there is some translation of color that has occurred! It does not appear to be a case of misaligned profile or missing profile.
I have produced a detailed JS-Fiddle below on how to reproduce the issue.
http://jsfiddle.net/E4yRv/141/

Answer 1

I have encountered the similar color shift phenomenon in browser recently, and the translation of color in the human face can be reproduced by the JSFiddle code. After some research and thanks to the suggestion provided by Alexander O'Mara (the color profile in image), here is my conclusion:
The phenomenon should be caused by the embedded color profile in the sample image. If you open the original image in photoshop, it will show a warning window, which indicates that the color profile doesn't match the current used color gamut, and three options can be chosen:
use embedded color profile (in short, let's call it ref_ICC)
convert the color to the current used color gamut (after the conversion, a new ICC, i.e., the con_ICC, will be embedded in the resulting image)
ignore the color profile
After saving the three images by choosing the respective options, let's open them in some image viewer. I use XnView to check if any color profile (ICC) is embedded in image, and use Photoshop to check the RGB histogram. The result is:
(the downloaded* stands for the image obtained by the JSFiddle code of canvas.toDataURL)
| option 1 | option 2 | option 3 | downloaded*
histogram | ref_hist | con_hist | ref_hist | con_hist
ICC | ref_ICC | con_ICC | X | X
In a viewer (FastStone, for example) which doesn't care about the color profile (ICC), the displayed RGB value only depends on the histogram. So the original image (option 1) looks different from the downloaded one, in which the histogram seems to be converted by the browser in a way similar to the photoshop does for option 2. On the other hand, the image pairs of "option 1 & 3" and "option 2 & downloaded" show the same displayed value.
If the images are viewed in photoshop, then the three images (option 1 & 2 & downloaded) show the same displayed value. And as a final comparison, the displayed value of the downloaded image is the same in FastStone and Photoshop, while the original image shows different displayed value in these two viewers.