जावास्क्रिप्ट के साथ किसी छवि से औसत या मुख्य रंग कैसे प्राप्त करें?

Question

जो मैं चाहता हूं वह हेक्स या आरजीबी औसत मूल्य को किसी छवि से इस रंग की दूसरी div पृष्ठभूमि में लेना है।

तो अगर मैं लाल रंग के साथ एक छवि अपलोड करता हूं तो मुझे उदाहरण के रूप में # एफएफ 0000 की तरह कुछ मिलता है।

मुझे बताएं कि यह सही है :)

बहुत धन्यवाद।

Answer 1

को यहां बताए गए यह केवल संभव कैनवास टैग का उपयोग कर रहा है:

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

बेशक इस नए ब्राउज़र कैनवास पर

Answer 2

• रखें छवि में ही उपलब्ध है।
• 2 डी संदर्भ प्राप्त करें।
• पिक्सल के माध्यम से लूप, और प्रत्येक आर, जी, बी मान स्टोर करें। यदि आप वही पाते हैं, तो इसे एक बार बढ़ाएं।
• संग्रहित आर, जी, बी मानों के माध्यम से लूप और सबसे बड़ा आर, जी, बी मान का ध्यान रखें।
• 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. 1px को (यह पिक्सेल गणना औसत हो जाएगा)
जिसके परिणामस्वरूप पिक्सेल के रंग जाओ

Answer 5

आप संकल्प फ़िल्टर का उपयोग करने पर विचार कर सकते हैं सीएसएस आपको आवेदन करने की अनुमति देता है। यह उस प्रभाव को प्राप्त करने में सक्षम हो सकता है जिसके लिए आप जा रहे हैं (मान लीजिए कि आप इसे वापस HTML में प्रस्तुत करना चाहते हैं)। तो आप छवि को दो बार प्रदर्शित कर सकते हैं, एक संकलित।

कहा जा रहा है, अगर वास्तव में किसी उद्देश्य के लिए आपको जानकारी की आवश्यकता है तो वास्तव में काम नहीं करता है।