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

Question

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

所以，如果我上传一个红色的图像我得到的东西像＃FF0000只是一个例子。

让我知道这是否可行:)

非常感谢。

Answer 1

这是唯一可能使用canvas标签，如下所述：

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

当然，这仅仅是在新的浏览器在画布上

Answer 2

• 认沽可用的图像。
• 获取2D上下文。
• 循环遍历像素，并存储每个r，g，b值。如果您发现相同，请增加一次。
• 循环存储的r，g，b值并记录最大的r，g，b值。
• Convert r,g,b to hex。

Answer 3

首先，画上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。

Answer 4

查找用于平均色彩：上帆布

1. 穿戴图片
2. 调整尺寸图像由1px的
3. 1像素获取所得像素的颜色（该象素将是所计算的平均值）

Answer 5

你可能会考虑使用卷积过滤器css允许你申请。这可能会得到你想要的效果（假设你想把它呈现回html中）。所以你可以显示图像两次，一次卷积。

这就是说，如果您为了某种目的需要自己的信息，它并不会真正起作用。