如何使用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中）。所以你可以顯示圖像兩次，一次卷積。

這就是說，如果您爲了某種目的需要自己的信息，它並不會真正起作用。