画像の平均色をCanvasで取得

Windows 8、FireFox OSではこのような効果があり、重要ではありませんが、システム全体を調和させて面白くすることができます.
これが私たちが今日お話しする主な内容で、画像の平均色です.
まず、canvasのgetImageData関数を使用して、すべてのピクセルのデータを取得できます.
その後、すべてのrgb 3値をそれぞれ平均値にすればよい.
実装:

function getImageColor(canvas, img) {
    canvas.width = img.width;
    canvas.height = img.height;

    var context = canvas.getContext("2d");

    context.drawImage(img, 0, 0);

    //       
    var data = context.getImageData(0, 0, img.width, img.height).data;

    //          
    for (var row = 0; row < img.height; row++) {
        for (var col = 0; col < img.width; col++) {
            r += data[((img.width * row) + col) * 4];
            g += data[((img.width * row) + col) * 4 + 1];
            b += data[((img.width * row) + col) * 4 + 2];
        }
    }

    //      
    r /= (img.width * img.height);
    g /= (img.width * img.height);
    b /= (img.width * img.height);

    //        
    r = Math.round(r);
    g = Math.round(g);
    b = Math.round(b);

    return "rgb(" + r + "," + g + "," + b + ")";
}

これで、私たちが望んでいる値を得ることができます.