छवि डार्क/लाइट डिटेक्शन क्लाइंट पक्षीय स्क्रिप्ट

Question

क्या किसी को पता है कि क्लाइंट पक्षीय स्क्रिप्ट का उपयोग करके किसी छवि (अंधेरे में शामिल) में अंधेरे/हल्केपन का पता लगाने के लिए कोई स्क्रिप्ट उपलब्ध है या नहीं?

मैं मूल रूप से पृष्ठभूमि में उपयोग की जाने वाली छवि (अंधेरा/प्रकाश) के प्रकार का पता लगाने में सक्षम होना चाहता हूं और सीएसएस/एचटीएमएल/जेक्री/जेएस एक चर के आधार पर पृष्ठ को अनुकूलित करता है जो कि प्रकाश का अंधेरा है (सत्य असत्य)।

मुझे पता है कि सर्वर पक्षीय स्क्रिप्ट उपलब्ध है लेकिन इस विशेष विकास के लिए इसका उपयोग नहीं कर सकती है।

अग्रिम धन्यवाद।

Answer 1

इस समारोह पैमाने ग्रे और वापसी सभी पिक्सल के औसत है, तो अंतिम मान 0 (अंधेरे) और 255 (प्रतिभाशाली)

function getImageLightness(imageSrc,callback) { 
    var img = document.createElement("img"); 
    img.src = imageSrc; 
    img.style.display = "none"; 
    document.body.appendChild(img); 

    var colorSum = 0; 

    img.onload = function() { 
     // create canvas 
     var canvas = document.createElement("canvas"); 
     canvas.width = this.width; 
     canvas.height = this.height; 

     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(this,0,0); 

     var imageData = ctx.getImageData(0,0,canvas.width,canvas.height); 
     var data = imageData.data; 
     var r,g,b,avg; 

     for(var x = 0, len = data.length; x < len; x+=4) { 
      r = data[x]; 
      g = data[x+1]; 
      b = data[x+2]; 

      avg = Math.floor((r+g+b)/3); 
      colorSum += avg; 
     } 

     var brightness = Math.floor(colorSum/(this.width*this.height)); 
     callback(brightness); 
    } 
} 

प्रयोग के बीच हो जाएगा करने के लिए प्रत्येक रंग में परिवर्तित कर देंगे:

getImageLightness("image.jpg",function(brightness){ 
    console.log(brightness); 
}); 

JSFiddle:

http://jsfiddle.net/s7Wx2/

Answer 2

मेरा जवाब reuses @ lostsource के उत्तर में अधिकांश कोड लेकिन यह अंधेरे और हल्की छवियों के बीच अंतर करने का प्रयास करने के लिए एक अलग विधि का उपयोग करता है।

सबसे पहले हमें (संक्षिप्त रूप से) विश्लेषण करना होगा कि आरजीबी चैनलों के योग के औसत मूल्य का नतीजा क्या है। मनुष्यों के लिए, यह व्यर्थ है। हरे रंग की तुलना में गुलाबी चमकदार है? यानी, आप (0, 255, 0) क्यों चाहते हैं (255, 0, 255) से कम चमक मूल्य दें? इसके अलावा, एक मध्य हरा (128, 128, 128) उज्ज्वल है जैसे कि एक मध्य हरा (128, 255, 0)? इसे ध्यान में रखने के लिए, मैं केवल चैनल की रंग चमक से निपटता हूं जैसा एचएसवी कलर स्पेस में किया जाता है। यह केवल एक दिए गए आरजीबी ट्रिपलेट का अधिकतम मूल्य है।

शेष हेरिस्टिक्स है। कुछ बिंदु i के लिए max_rgb = max(RGB_i) दें। यदि max_rgb 128 से कम है (8bpp छवि मानते हुए), तो हमें एक नया बिंदु i मिला जो अंधेरा है, अन्यथा यह हल्का है। प्रत्येक बिंदु i के लिए ऐसा करने के लिए, हमें A अंक मिलते हैं जो प्रकाश और B अंक अंधेरे होते हैं। यदि (A - B)/(A + B) >= 0 तो हम कहते हैं कि छवि हल्की है। ध्यान दें कि यदि हर बिंदु अंधेरा है, तो आपको -1 का मान मिलता है, इसके विपरीत यदि प्रत्येक बिंदु प्रकाश है तो आपको +1 मिल जाएगा। पिछले सूत्र को tweaked किया जा सकता है ताकि आप छवियों को मुश्किल से स्वीकार कर सकते हैं। कोड में मैंने चर को fuzzy के रूप में नामित किया है, लेकिन यह छवि प्रसंस्करण में fuzzy फ़ील्ड का कोई न्याय नहीं करता है। इसलिए, हम कहते हैं कि (A - B)/(A + B) + fuzzy >= 0 पर छवि हल्की है।

कोड http://jsfiddle.net/s7Wx2/7/ पर है, यह बहुत सरल है, मेरे नोट्स आपको डराए मत।

Answer 3

पृष्ठभूमि जांच नामक एक स्क्रिप्ट किसी छवि में अंधेरे/हल्केपन का पता लगा सकती है। ऐसा करने के लिए यह जावास्क्रिप्ट का उपयोग करता है।

http://www.kennethcachia.com/background-check/

मुझे आशा है कि यह के भीतर का पता लगाने के इस प्रकार के साथ एक स्लाइडर बनाने की चाह किसी को भी मदद करता है:

यहाँ यह करने के लिए एक कड़ी है।