用Canvas获取图像平均颜色

在Windows8、FireFox OS中有这样一种效果，虽然不是很重要，但是却能让整个系统变得和谐有趣。

这就是我们今天要讲的主要内容，图片平均颜色。

首先，我们可以使用canvas的getImageData函数获取所有像素的数据。

然后将所有的rgb三值各取平均值即可。

实现：

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 + ")";
}

这样，就可以得到我们想要的值了。