Is the canvas getImageData method a machine / browser dependent?

Question

The client needs help with a program that extracts the dominant color of the product image.

I was able to quickly implement this in Javascript; the algorithm below displays only the central square of a 3x3 grid in the image for quick evaluation of the color of the t-shirt in the image.

var image = new Image(); image.onload = function() { try { // get dominant color by sampling the central square of a 3x3 grid on image var dominantColor = getDominantColor(); // output color $("#output").html(dominantColor); } catch(e) { $("#output").html(e); } }; image.src = "sample_image.jpg"; function getDominantColor() { // Copy image to canvas var canvas = $("<canvas/>")[0]; canvas.width = image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0); // get pixels from the central square of a 3x3 grid var imageData = canvas.getContext("2d").getImageData(canvas.width/3, canvas.height/3, canvas.width/3, canvas.height/3).data; var colorOccurrences = {}; var dominantColor = ""; var dominantColorOccurrence = 0; for(var i = 0; i < imageData.length; i += 4) { var red = imageData[i]; var green = imageData[i+1]; var blue = imageData[i+2]; //var alpha = imageData[i+3]; // not required for this task var color = RGBtoHEX({"red": red, "green": green, "blue": blue}); if(colorOccurrences[color] == undefined) { colorOccurrences[color] = 1; } else { colorOccurrences[color] ++; if(colorOccurrences[color] > dominantColorOccurrence) { dominantColorOccurrence = colorOccurrences[color]; dominantColor = color; } } } return dominantColor; } function RGBtoHEX(rgb) { var hexChars = "0123456789ABCDEF"; return "#" + (hexChars[~~(rgb.red/16)] + hexChars[rgb.red%16]) + (hexChars[~~(rgb.green/16)] + hexChars[rgb.green%16]) + (hexChars[~~(rgb.blue/16)] + hexChars[rgb.blue%16]); } 

The image in question is this (preview below).

However, the results when this image is processed in the above code vary between machines / browsers: #FF635E is what I see on my machine, running Windows7 and using Firefox 32. My Mac running client gets the result #FF474B in Safari and #FF474C in Firefox 33.

Although the results are close, why are they ideally inaccurate? Does getImageData really depend on local configuration or are JPG data interpreted differently on different machines?

Change This image is not disposable. Such color variations were seen in the range of the image that the client requested to process. My client and I got different results for the same set of images.

Answer 1

Yes. This fact is used for printing on canvas :

The same HTML5 Canvas element can create exceptional pixels in different web browsers, depending on the system on which it was run.

This happens for several reasons: at the image format level - web browsers use different image processing mechanisms, export options, compression level, final images can have different hashes, even if they are ideal for a pixel; at the pixmap level - the use of operating systems; various algorithms and settings for smoothing and subpixel rendering. We do not know all the reasons, but we have already collected more than a thousand unique signatures.