如何使用javascript从图像中获取平均颜色或主颜色?

时间:2011-03-02 02:39:29

标签: javascript image canvas

我想要的是HEX或RGB平均值从图像到另一个div背景这种颜色。

因此,如果我上传一张红色的图像,我会以#FF0000为例。

让我知道这是否可行:)

非常感谢。

5 个答案:

答案 0 :(得分:12)

首先,在canvas上绘制图像:

function draw(img) {
    var canvas = document.createElement("canvas");
    var c = canvas.getContext('2d');
    c.width = canvas.width = img.width;
    c.height = canvas.height = img.height;
    c.clearRect(0, 0, c.width, c.height);
    c.drawImage(img, 0, 0, img.width , img.height);
    return c; // returns the context
}

您现在可以迭代图像的像素。一种简单的颜色检测方法是简单地计算图像中每种颜色的频率。

// returns a map counting the frequency of each color
// in the image on the canvas
function getColors(c) {
    var col, colors = {};
    var pixels, r, g, b, a;
    r = g = b = a = 0;
    pixels = c.getImageData(0, 0, c.width, c.height);
    for (var i = 0, data = pixels.data; i < data.length; i += 4) {
        r = data[i];
        g = data[i + 1];
        b = data[i + 2];
        a = data[i + 3]; // alpha
        // skip pixels >50% transparent
        if (a < (255 / 2))
            continue; 
        col = rgbToHex(r, g, b);
        if (!colors[col])
            colors[col] = 0;
        colors[col]++;
    }
    return colors;
}

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}

getColors返回颜色名称和计数的地图。跳过透明像素。从这张地图中获取最常见的颜色应该是微不足道的。

如果你真的想要每个颜色组件的平均值,你也可以从getColors的结果轻松得到它,但结果可能不是很有用。 This answer解释了一种更好的方法。

您可以像这样使用它:

// nicely formats hex values
function pad(hex) {
    return ("000000" + hex).slice(-6);
}

// see this example working in the fiddle below
var info = document.getElementById("info");
var img = document.getElementById("squares");
var colors = getColors(draw(img));
for (var hex in colors) {
    info.innerHTML += "<li>" + pad(hex) + "->" + colors[hex];
}

查看working example

答案 1 :(得分:4)

  • 将图片放在画布上。
  • 获取2D背景。
  • 循环显示像素,并存储每个r,g,b值。如果找到相同的内容,请将其递增一次。
  • 循环存储的r,g,b值并记下最大的r,g,b值。
  • Convert r,g,b to hex

答案 2 :(得分:3)

这只能使用如下所述的canvas标签:

http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation

当然这只适用于较新的浏览器

答案 3 :(得分:0)

您可以考虑使用卷积滤镜css允许您应用。这可能会得到你想要的效果(假设你想要将它呈现回html)。因此,您可以显示图像两次,一次卷积。

话虽如此,如果您出于某种目的自己需要这些信息,那么它并不真正有用。

答案 4 :(得分:-1)

寻找平均颜色:

  1. 将图像放在画布上
  2. 通过1px
  3. 将图像调整为1px
  4. 获取结果像素的颜色(此像素将是计算的平均值)