通过Javascript获取图像的平均颜色

javascript image-manipulation

2022-08-30 04:06:36

不确定这是否可能，但希望编写一个脚本来返回图像的平均值或值。我知道它可以在AS中完成，但希望在JavaScript中完成。hexrgb

答案 1

AFAIK，做到这一点的唯一方法是使用...<canvas/>

请注意，这仅适用于同一域和支持 HTML5 画布的浏览器中的图像：

function getAverageRGB(imgEl) {

    var blockSize = 5, // only visit every 5 pixels
        defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs
        canvas = document.createElement('canvas'),
        context = canvas.getContext && canvas.getContext('2d'),
        data, width, height,
        i = -4,
        length,
        rgb = {r:0,g:0,b:0},
        count = 0;

    if (!context) {
        return defaultRGB;
    }

    height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
    width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;

    context.drawImage(imgEl, 0, 0);

    try {
        data = context.getImageData(0, 0, width, height);
    } catch(e) {
        /* security error, img on diff domain */
        return defaultRGB;
    }

    length = data.data.length;

    while ( (i += blockSize * 4) < length ) {
        ++count;
        rgb.r += data.data[i];
        rgb.g += data.data[i+1];
        rgb.b += data.data[i+2];
    }

    // ~~ used to floor values
    rgb.r = ~~(rgb.r/count);
    rgb.g = ~~(rgb.g/count);
    rgb.b = ~~(rgb.b/count);

    return rgb;

}

对于IE，请查看excanvas。

答案 2

我想我会发布一个我最近遇到的项目来获得主导颜色：

颜色小偷

用于从图像中获取主色或代表性调色板的脚本。使用javascript和canvas。

其他提及和建议显色的解决方案从未在适当的上下文中真正回答过这个问题（“在javascript中”）。希望这个项目能帮助那些想要做到这一点的人。