Canvas获取图像、图片的平均颜色或主色调

转载自：https://blog.csdn.net/teajs/article/details/50124207

首先，我们可以使用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 + ")";
}