अपनी पारदर्शी पृष्ठभूमि को बदलने के बिना छवि रंग कनवर्ट करें

Question

क्या किसी के पास HTML5 या कैनवास (या किसी अन्य HTML5 तकनीक) की सहायता से गैर-पारदर्शी क्षेत्र के रंग को बदलने का अच्छा समाधान है।

मैं एक बहुत googled और (कैनवास के साथ) कुछ समाधान जो एक छवि, जैसे का रंग बदल सकते,

How do i tint an image with HTML5 Canvas?

Canvas - Change colors of an image using HTML5/CSS/JS?

लेकिन इन समाधान भी करने के लिए पारदर्शी पृष्ठभूमि बदल पाया दिया गया रंग (जो मुझे नहीं चाहिए)।

यह एक stackoverflow पारदर्शी पृष्ठभूमि के साथ छवि png। अब, मैं अपने पारदर्शी पिक्सल (पृष्ठभूमि) को प्रभावित किए बिना छवि रंग बदलना चाहता हूं, ताकि मैं नए रंग के साथ कैनवास toDataURL विधि की सहायता से फिर से एक छवि को सहेज सकूं।

मुझे यकीन नहीं है कि यह HTML5 के साथ संभव है या नहीं। किसी भी सहायताको बहुत सराहा जाएगा।

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

******************* संपादित *********************

जोड़ा गया पिल्ल की नई छवि (कैप्सूल)।

Answer 1

एक डेमो (नीचे इस डेमो के बारे में नोट देखें): http://jsfiddle.net/m1erickson/2d7ZN/

आप छवि के RGBA पिक्सेल डेटा युक्त एक सरणी प्राप्त कर सकते हैं का उपयोग कर context.getImageData

var imageData=context.getImageData(0,0,canvas.width,canvas.height); 

var data=imageData.data; 

वहां से आप प्रत्येक पिक्सेल के रंग को पढ़ सकते हैं (और वैकल्पिक रूप से बदल सकते हैं)।

RGBA सरणी इस तरह खर्च की गई थी:

// top-left pixel (x:0,y:0) 

data[0] red of pixel#0 (0-255) 
data[1] green of pixel#0 (0-255) 
data[2] blue of pixel#0 (0-255) 
data[3] alpha of pixel#0 (opacity: 0-255) 

// next pixel (x:1,y:0) 

data[4] red of pixel#1 
data[5] green of pixel#1 
data[6] blue of pixel#1 
data[7] alpha of pixel#1 

आप आर, जी, बी या डेटा सरणी

उदाहरण के लिए परिवर्तित करके किसी भी पिक्सेल का एक घटक को बदल सकते हैं, यह बदल जाता है पूरी तरह से लाल

data[0]=255; // red 
data[1]=0;  // green 
data[2]=0;  // blue 
data[3]=255; // alpha (opacity) 

के ऊपरी बाएँ पिक्सेल पारदर्शिता के बारे में:

प्रत्येक पिक्सेल का अल्फा घटक पिक्सेल की पारदर्शिता निर्धारित करता है।आप केवल ज्यादातर अपारदर्शी पिक्सल संशोधित करने के लिए चाहते हैं, तो आप आसानी से इस तरह सभी अर्द्ध पारदर्शी पिक्सल अनदेखा कर सकते हैं:

// alpha is 0-255 
// ignore pixels with alpha < 200 (ignore all pixels that are mostly semi-transparent) 

if(data[3]<200) { // don't process this pixel } 

अंत में, आप के साथ कैनवास करने के लिए वापस अपने संशोधित पिक्सल धक्का कर सकते हैं .putImageData

context.putImageData(imageData,0,0); 

डेमो के बारे में

नोट

यह "पुनः रंग" के लिए एक छवि कैनवास के डिफ़ॉल्ट RGBA रंग योजना का उपयोग कर मुश्किल है।

तो यह डेमो आरजीबी डेटा को एचएसएल रंग योजना में परिवर्तित करता है। यह पिक्सेल के अन्य घटकों को प्रभावित किए बिना "रंग" (रंग) को बदलने की अनुमति देता है (एस = रंग की संतृप्ति, एल = रंग की हल्कीता)।

पिक्सेल को फिर से याद करने के बाद, संशोधित एचएसएल डेटा को वापस आरजीबीए में परिवर्तित कर दिया जाता है और डेटा सरणी में सहेजा जाता है।