जावास्क्रिप्ट

Question

के माध्यम से छवि का औसत रंग प्राप्त करें यह सुनिश्चित नहीं है कि यह संभव है, लेकिन एक ऐसी स्क्रिप्ट लिखना चाहती है जो किसी छवि के लिए औसत hex या rgb मान वापस करेगी। मुझे पता है कि यह एएस में किया जा सकता है लेकिन जावास्क्रिप्ट में ऐसा करने की तलाश में है।

Answer 1

AFAIK, यह करने के लिए एक ही रास्ता <canvas/> साथ है ...

डेमो V2: http://jsfiddle.net/xLF38/818/

ध्यान दें, यह केवल एक ही डोमेन पर और ब्राउज़रों कि समर्थन में छवियों के साथ काम करेंगे एचटीएमएल 5 कैनवास:

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 की जाँच करें।

Answer 2

जावास्क्रिप्ट को किसी छवि के व्यक्तिगत पिक्सेल रंग डेटा तक पहुंच नहीं है। कम से कम, एचटीएमएल 5 तक नहीं ... इस बिंदु पर यह कारण है कि आप एक कैनवास में एक छवि खींचने में सक्षम होंगे, और फिर कैनवास का निरीक्षण करें (शायद, मैंने इसे कभी नहीं किया है)।

Answer 3

मैं HTML कैनवास टैग के माध्यम से कहूंगा।

आप ओपेरा देव द्वारा एक छोटा सा कोड के बारे में बात @Georg द्वारा एक पोस्ट here पा सकते हैं:

// Get the CanvasPixelArray from the given coordinates and dimensions. 
var imgd = context.getImageData(x, y, width, height); 
var pix = imgd.data; 

// Loop over each pixel and invert the color. 
for (var i = 0, n = pix.length; i < n; i += 4) { 
    pix[i ] = 255 - pix[i ]; // red 
    pix[i+1] = 255 - pix[i+1]; // green 
    pix[i+2] = 255 - pix[i+2]; // blue 
    // i+3 is alpha (the fourth element) 
} 

// Draw the ImageData at the given (x,y) coordinates. 
context.putImageData(imgd, x, y); 

यह आर, जी और प्रत्येक पिक्सेल के बी मूल्य का उपयोग करके छवि को उलटने के। आप आसानी से आरजीबी मूल्यों को स्टोर कर सकते हैं, फिर लाल, हरे और नीले रंग के सरणी को गोल कर सकते हैं, और अंत में उन्हें वापस एक हेक्स कोड में परिवर्तित कर सकते हैं।

Answer 4

पहला: यह HTML5 कैनवास या एसवीजी के बिना किया जा सकता है।
वास्तव में, किसी को सिर्फ कैनवास या एसवीजी बिना generate client-side PNG files using JavaScript, में कामयाब रहे, data URI scheme का उपयोग कर।

दूसरा: आपको वास्तव में कैनवास, एसवीजी या उपर्युक्त में से कोई भी आवश्यकता नहीं हो सकती है।
यदि आपको केवल ग्राहक को प्रक्रिया छवियों की आवश्यकता है, बिना संशोधित, यह सब आवश्यक नहीं है। जावास्क्रिप्ट से एक बाइट धारा के रूप में यह प्रक्रिया और -

आप पृष्ठ पर img टैग से स्रोत का पता प्राप्त कर सकते हैं, इसके लिए एक XHR अनुरोध करना - यह सबसे शायद ब्राउज़र कैश से आ जाएगा।
आपको छवि प्रारूप की अच्छी समझ की आवश्यकता होगी। (उपर्युक्त जनरेटर आंशिक रूप से libpng स्रोतों पर आधारित है और एक अच्छा प्रारंभिक बिंदु प्रदान कर सकता है।)

Answer 5

"डोमिनेंट कलर" मुश्किल है। आप जो करना चाहते हैं वह प्रत्येक पिक्सेल और रंगीन स्थान (यूक्लिडियन दूरी) में हर दूसरे पिक्सेल के बीच की दूरी की तुलना करें, और उसके बाद पिक्सेल ढूंढें जिसका रंग हर दूसरे रंग के सबसे नज़दीक है। वह पिक्सेल प्रभावशाली रंग है। औसत रंग आमतौर पर मिट्टी होगा।

मेरी इच्छा है कि आपको यूक्लिडियन दूरी दिखाने के लिए यहां मैथएमएल था। यह गूगल। https://gist.github.com/cf23f8bddb307ad4abd8

हालांकि यह बहुत computationally महंगा है:

मैं आरजीबी रंग अंतरिक्ष में ऊपर निष्पादन PHP/जीडी यहाँ का उपयोग कर पूरा किया है।यह आपके सिस्टम को बड़ी छवियों पर क्रैश करेगा, और यदि आप क्लाइंट में इसे आजमाते हैं तो निश्चित रूप से आपके ब्राउज़र को क्रैश कर देगा। मैं अपने निष्पादन को पुन: सक्रिय करने पर काम कर रहा हूं: - प्रत्येक पिक्सेल पर पुनरावृत्ति में भविष्य के उपयोग के लिए एक लुकअप तालिका में स्टोर परिणाम। - स्थानीयकृत प्रभुत्व के लिए 20px 20px की ग्रिड में बड़ी छवियों को विभाजित करने के लिए। - x1y1 और x1y2 के बीच की दूरी को समझने के लिए x1y1 और x1y2 के बीच euclidean दूरी का उपयोग करने के लिए।

अगर आप इस मोर्चे पर प्रगति करते हैं तो कृपया मुझे बताएं। मुझे यह देखकर खुशी होगी। मैं भी यही करूंगा।

कैनवास निश्चित रूप से ग्राहक में ऐसा करने का सबसे अच्छा तरीका है। एसवीजी नहीं है, एसवीजी वेक्टर आधारित है। निष्पादन को कम करने के बाद, अगली चीज़ जो मैं करना चाहता हूं वह कैनवास में चल रही है (शायद प्रत्येक पिक्सेल की समग्र दूरी गणना के लिए वेबवर्कर के साथ)।

इस बारे में सोचने की एक और बात यह है कि आरजीबी ऐसा करने के लिए एक अच्छी रंगीन जगह नहीं है, क्योंकि आरजीबी स्पेस में रंगों के बीच यूक्लिडियन दूरी दृश्य दूरी के बहुत करीब नहीं है। ऐसा करने के लिए एक बेहतर रंग स्थान LUV हो सकता है, लेकिन मुझे इसके लिए एक अच्छी लाइब्रेरी नहीं मिली है, या किसी भी algorythims आरजीबी को LUV में परिवर्तित करने के लिए नहीं मिला है।

इंद्रधनुष में अपने रंगों को सॉर्ट करने के लिए एक पूरी तरह से अलग दृष्टिकोण होगा, और एक रंग के अलग-अलग रंगों के लिए सहिष्णुता के साथ हिस्टोग्राम बनाएं। मैंने यह कोशिश नहीं की है, क्योंकि इंद्रधनुष में सॉर्टिंग रंग कठिन है, और इसलिए रंग हिस्टोग्राम भी हैं। मैं इसे अगले कोशिश कर सकता हूँ। दोबारा, अगर आप यहां कोई प्रगति करते हैं तो मुझे बताएं।

Answer 6

समझ से मैं एक परियोजना मैं हाल ही में प्रमुख रंग प्राप्त करने के लिए में आए पोस्ट चाहते हैं:

Color Thief

प्रमुख रंग या एक छवि से एक प्रतिनिधि रंग पैलेट हथियाने के लिए एक स्क्रिप्ट। जावास्क्रिप्ट और कैनवास का उपयोग करता है।

अन्य रंगों का उल्लेख करने और सुझाव देने वाले अन्य समाधान वास्तव में उचित संदर्भ ("जावास्क्रिप्ट में") में वास्तव में प्रश्न का उत्तर नहीं देते हैं। उम्मीद है कि यह परियोजना उन लोगों की मदद करेगी जो बस ऐसा करना चाहते हैं।

Answer 7

यह "रंग मात्रा" के बारे में है जिसमें MMCQ (संशोधित औसत कट क्वांटिज़ेशन) या ओक्यू (ऑक्ट्री क्वांटिज़ेशन) जैसे कई दृष्टिकोण हैं। रंगों के क्लस्टर प्राप्त करने के लिए विभिन्न दृष्टिकोण K-Means का उपयोग करें।

मैं एक साथ यहाँ सब putted है, के बाद से मैं tvOS के लिए एक समाधान जहां एक्सएचटीएमएल के एक सबसेट है, कोई <canvas/> तत्व है कि खोजने गया था:

Generate the Dominant Colors for an RGB image with XMLHttpRequest

Answer 8

मैं हाल ही में एक jQuery प्लगइन में आए जो एक छवि से एक dominiate रंग प्राप्त करने के संबंध में मैं मूल रूप से https://github.com/briangonzalez/jquery.adaptive-backgrounds.js चाहता था।

Answer 9

एक ऑनलाइन उपकरण pickimagecolor.com है जो आपको छवि का औसत या प्रभावशाली रंग खोजने में मदद करता है। आपको बस अपने कंप्यूटर से एक छवि अपलोड करना है और फिर छवि पर क्लिक करना है। यह हेक्स, आरजीबी और एचएसवी में औसत रंग देता है। यह उस रंग से मेल खाने वाले रंगीन रंगों को भी चुनने के लिए मिलता है। मैंने इसे कई बार इस्तेमाल किया है।