画布getImageData方法是否依赖机器/浏览器？

Question

一位客户需要一个提取产品图像主色调的程序的帮助。

我能够用Javascript快速实现这一点；下面的算法仅对图像上3x3网格的中心正方形进行采样，以便快速估计图像中的t恤颜色。

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]);
}

有问题的图像是这个（预览如下）。

但是，在上述代码中处理此图像的结果在不同的机器/浏览器中有所不同：#FF635E是我在运行Windows7和使用Firefox 32的机器上看到的结果。我运行Mac的客户端在Safari和Firefox 33上分别获得#FF474B和#FF474C的结果。

虽然结果很接近，但为什么理想情况下它们并不完全相同？getImageData是否确实因本地设置而异，或者JPG数据在不同机器上的解释是否不同？

编辑：此图像不是一次性案例。在客户要求处理的一系列图像中，都注意到了这种颜色变化。我的客户和我对同一组图像得到了不同的结果。

Answer 1

是的。这一事实被帆布指纹所利用：

同一个HTML5 Canvas元素可以在不同的网络浏览器上产生特殊的像素，这取决于执行它的系统。

出现这种情况的原因有几个：在图像格式级别——web浏览器使用不同的图像处理引擎、导出选项、压缩级别，最终图像可能会得到不同的哈希值，即使它们是像素完美的；在pixmap级别，操作系统使用不同的算法和设置进行抗锯齿和亚像素渲染。我们不知道所有的原因，但我们已经收集了一千多个独特的签名。