कैनवास ImageData सफेद पिक्सल को हटाएं

Question

मेरे पास HTML में कुछ छवियां हैं जिनमें एक सफेद पृष्ठभूमि है। मुझे सफेद पृष्ठभूमि को हटाने की जरूरत है। मैं सोच रहा था कि मैं सभी सफेद पिक्सेल पारदर्शी बना सकता हूं, लेकिन मुझे नहीं पता कि यह कैसे करना है। मैं केवल एचटीएमएल/जावास्क्रिप्ट का उपयोग करना चाहूंगा।

Answer 1

तरीके से ऐसा करने के लिए है ..

function white2transparent(img) 
{ 
    var c = document.createElement('canvas'); 

    var w = img.width, h = img.height; 

    c.width = w; 
    c.height = h; 

    var ctx = c.getContext('2d'); 

    ctx.drawImage(img, 0, 0, w, h); 
    var imageData = ctx.getImageData(0,0, w, h); 
    var pixel = imageData.data; 

    var r=0, g=1, b=2,a=3; 
    for (var p = 0; p<pixel.length; p+=4) 
    { 
     if (
      pixel[p+r] == 255 && 
      pixel[p+g] == 255 && 
      pixel[p+b] == 255) // if white then change alpha to 0 
     {pixel[p+a] = 0;} 
    } 

    ctx.putImageData(imageData,0,0); 

    return c.toDataURL('image/png'); 
} 

और यह इस विधि के दिए गए मान के लिए एक छवि का src सेट का उपयोग करें।

var someimage = document.getElementById('imageid'); 
someimage.src = white2transparent(someimage); 

http://jsfiddle.net/gaby/UuCys/

---

इस कोड को काम करने के लिए के लिए, छवि कोड के रूप में एक ही डोमेन से आ जाना चाहिए (सुरक्षा कारणों से)।

Answer 2

अच्छी तरह से "getImageData" के साथ कैनवास ऑब्जेक्ट से प्राप्त छवि डेटा केवल आरजीबीए पिक्सेल जानकारी है - यानी लाल, हरा, नीला, और अल्फा पारदर्शिता है। इस प्रकार आप छवि डेटा प्राप्त कर सकते हैं और एक बार में चार पिक्सेल देखकर बस फिर से चला सकते हैं। जब आप एक सफेद देखते हैं, तो आप इसे शून्य कर सकते हैं (अल्फा मान के साथ)।

अब बात यह है कि आप परिणामों से संतुष्ट नहीं होंगे क्योंकि अभी भी गैर-सफेद तत्वों के आस-पास "हेलो" होगा। मूल छवि रंगीन क्षेत्रों के किनारों पर (शायद) थोड़ा धुंधला, प्रभावशाली एंटी-एलाइज्ड है। इस प्रकार किनारों के साथ पिक्सल हैं जो मुख्य छवि की तुलना में थोड़ा हल्का है, और आप उन सभी शुद्ध सफेद लोगों को हटाने के बाद भी उनको देखेंगे।

किनारों को वास्तव में साफ करने के लिए वास्तव में आपको किस प्रकार की स्रोत छवियां मिलती हैं, इस पर निर्भर करता है। मुझे नहीं लगता कि यह बढ़त छवि प्रसंस्करण या कुछ भी काट रहा है, लेकिन यह मामूली नहीं है।

Answer 3

एक जेपीजी का उपयोग करने के बजाय, छवि के चारों ओर एक पारदर्शी पृष्ठभूमि के साथ एक पीएनजी का उपयोग करें। आपके पास एक बेहतर परिणाम होगा।

Answer 4

लेकिन आप ड्राइंग से पहले बस स्पष्ट करना चाहते हैं imageData वहाँ एक छोटी समाधान :)

function clearData(imageData ) 
{ 
    var d = imageData.data; 
    var L = d.length; 
    for (var i = 3; i < L; i += 4) 
    { 
     d[i] = 0; 
    } 
} 

है