क्रोमो-कुंजी प्रभाव

Question

के लिए आरजीबी मान को सटीक रूप से फ़िल्टर करने के लिए कैसे करें मैंने अभी this ट्यूटोरियल पढ़ा है और इस उदाहरण को आजमाया है। तो मैंने अपने स्वयं के परीक्षण के लिए वेब से एक वीडियो डाउनलोड किया। सभी मुझे क्या करना है, तो स्थिति

यहाँ उदाहरण

computeFrame: function() { 
    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); 
    let frame = this.ctx1.getImageData(0, 0, this.width, this.height); 
    let l = frame.data.length/4; 

    for (let i = 0; i < l; i++) { 
     let r = frame.data[i * 4 + 0]; 
     let g = frame.data[i * 4 + 1]; 
     let b = frame.data[i * 4 + 2]; 
     if (g > 100 && r > 100 && b < 43) 
     frame.data[i * 4 + 3] = 0; 
    } 
    this.ctx2.putImageData(frame, 0, 0); 
    return; 
    } 

से नमूना कोड ट्यूटोरियल उदाहरण अपने छानने बाहर पीला (पीला नहीं मुझे लगता है) रंग में है में rgb मूल्यों tweak है। मैंने डाउनलोड नमूना वीडियो हरे रंग की पृष्ठभूमि का उपयोग करता है। तो अगर वांछित परिणाम प्राप्त करने के लिए स्थिति में आरजीबी मूल्य tweaked

कई कोशिशों के बाद, मैं इसे प्राप्त करने में कामयाब रहा।

अब क्या मैं जानना चाहता हूँ कि कैसे मैं सही ढंग से हरे रंग की स्क्रीन (या किसी अन्य स्क्रीन) को फ़िल्टर कर सकते पूरी तरह से अनुमान लगा के बिना है। या यादृच्छिक रूप से मूल्य tweaking।

अनुमान लगाने के साथ ही इसे सही तरीके से प्राप्त करने में घंटों लगते हैं। और यह वास्तविक दुनिया के आवेदन के साथ सिर्फ एक नमूना है। यह और अधिक ले सकता है।

नोट: उदाहरण के अब के लिए Firefox में काम कर रहा है ..

Answer 1

आप शायद सिर्फ एक बेहतर एल्गोरिथ्म की जरूरत है। यहां एक है, यह सही नहीं है, लेकिन आप इसे बहुत आसान बना सकते हैं।

मूल रूप से आप सिर्फ एक colorpicker की जरूरत है, और वीडियो से सबसे हल्का और सबसे बुरा मान लेने (L_ में आरजीबी मूल्यों डालने और क्रमशः चर d_) करेंगे। यदि आपको आवश्यकता हो तो आप सहनशीलता को थोड़ा सा समायोजित कर सकते हैं, लेकिन रंगीन पिकर के साथ विभिन्न क्षेत्रों को चुनकर l_ और r_ मानों को ठीक से प्राप्त करना आपको एक बेहतर कुंजी देगा।

let l_r = 131, 
    l_g = 190, 
    l_b = 137, 

    d_r = 74, 
    d_g = 148, 
    d_b = 100; 

let tolerance = 0.05; 

let processor = { 
    timerCallback: function() { 
    if (this.video.paused || this.video.ended) { 
     return; 
    } 
    this.computeFrame(); 
    let self = this; 
    setTimeout(function() { 
     self.timerCallback(); 
     }, 0); 
    }, 

    doLoad: function() { 
    this.video = document.getElementById("video"); 
    this.c1 = document.getElementById("c1"); 
    this.ctx1 = this.c1.getContext("2d"); 
    this.c2 = document.getElementById("c2"); 
    this.ctx2 = this.c2.getContext("2d"); 
    let self = this; 
    this.video.addEventListener("play", function() { 
     self.width = self.video.videoWidth; 
     self.height = self.video.videoHeight; 
     self.timerCallback(); 
     }, false); 
    }, 

    calculateDistance: function(c, min, max) { 
     if(c < min) return min - c; 
     if(c > max) return c - max; 

     return 0; 
    }, 

    computeFrame: function() { 
    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); 
    let frame = this.ctx1.getImageData(0, 0, this.width, this.height); 
     let l = frame.data.length/4; 

    for (let i = 0; i < l; i++) { 
     let _r = frame.data[i * 4 + 0]; 
     let _g = frame.data[i * 4 + 1]; 
     let _b = frame.data[i * 4 + 2]; 

     let difference = this.calculateDistance(_r, d_r, l_r) + 
         this.calculateDistance(_g, d_g, l_g) + 
         this.calculateDistance(_b, d_b, l_b); 
     difference /= (255 * 3); // convert to percent 
     if (difference < tolerance) 
     frame.data[i * 4 + 3] = 0; 
    } 
    this.ctx2.putImageData(frame, 0, 0); 
    return; 
    } 
}; 
// :/ 

Answer 2

यदि प्रदर्शन कोई फर्क नहीं पड़ता है, तो आप किसी अन्य रंग स्थान में काम कर सकते हैं उदा। एचएसवी। आप संदर्भ के रूप में बाएं शीर्ष पिक्सेल का उपयोग कर सकते हैं।

आप संदर्भ बिंदु के रंग मूल्य को अन्य पिक्सेल के साथ तुलना करते हैं, और संतृप्ति और मूल्य का उपयोग करके एक निश्चित दहलीज और अंधेरे और हल्के क्षेत्रों से अधिक सभी पिक्सेल को बाहर निकाल दें।

यह कभी भी रंग रक्तस्राव से पूरी तरह से छुटकारा नहीं पाता है, वहां आपको कुछ रंग सही/desaturation करने की आवश्यकता हो सकती है।

function rgb2hsv() { 
    var rr, gg, bb, 
     r = arguments[0]/255, 
     g = arguments[1]/255, 
     b = arguments[2]/255, 
     h, s, 
     v = Math.max(r, g, b), 
     diff = v - Math.min(r, g, b), 
     diffc = function(c){ 
      return (v - c)/6/diff + 1/2; 
     }; 

    if (diff == 0) { 
     h = s = 0; 
    } else { 
     s = diff/v; 
     rr = diffc(r); 
     gg = diffc(g); 
     bb = diffc(b); 

     if (r === v) { 
      h = bb - gg; 
     }else if (g === v) { 
      h = (1/3) + rr - bb; 
     }else if (b === v) { 
      h = (2/3) + gg - rr; 
     } 
     if (h < 0) { 
      h += 1; 
     }else if (h > 1) { 
      h -= 1; 
     } 
    } 
    return { 
     h: Math.round(h * 360), 
     s: Math.round(s * 100), 
     v: Math.round(v * 100) 
    }; 
} 


let processor = { 
    timerCallback: function() { 
    if (this.video.paused || this.video.ended) { 
     return; 
    } 
    this.computeFrame(); 
    let self = this; 
    setTimeout(function() { 
     self.timerCallback(); 
     }, 0); 
    }, 

    doLoad: function() { 
    this.video = document.getElementById("video"); 
    this.c1 = document.getElementById("c1"); 
    this.ctx1 = this.c1.getContext("2d"); 
    this.c2 = document.getElementById("c2"); 
    this.ctx2 = this.c2.getContext("2d"); 
    let self = this; 
    this.video.addEventListener("play", function() { 
     self.width = self.video.videoWidth/2; 
     self.height = self.video.videoHeight/2; 
     self.timerCallback(); 
     }, false); 
    }, 

    computeFrame: function() { 
    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); 
    let frame = this.ctx1.getImageData(0, 0, this.width, this.height); 
     let l = frame.data.length/4; 


    let reference = rgb2hsv(frame.data[0], frame.data[1], frame.data[2]); 

    for (let i = 0; i < l; i++) { 
     let r = frame.data[i * 4 + 0]; 
     let g = frame.data[i * 4 + 1]; 
     let b = frame.data[i * 4 + 2]; 
     let hsv = rgb2hsv(r, g, b); 

     let hueDifference = Math.abs(hsv.h - reference.h); 

     if(hueDifference < 20 && hsv.v > 50 && hsv.s > 50) { 
     frame.data[i * 4 + 3] = 0; 
     } 


    } 
    this.ctx2.putImageData(frame, 0, 0); 
    return; 
    } 
};