कैनवास तत्व में पीएनजी ड्राइंग - पारदर्शिता नहीं दिखा रहा है

Question

मैं कैनवास तत्व पर अर्ध-पारदर्शी पीएनजी खींचने के लिए drawImage का उपयोग करने की कोशिश कर रहा हूं। हालांकि, यह छवि पूरी तरह से अपारदर्शी के रूप में खींचता है। जब मैं उस संसाधन को देखता हूं जिसे ब्राउज़र में वास्तविक पीएनजी लोड किया जाता है और लोड किया जाता है, तो यह पारदर्शिता दिखाता है, लेकिन जब मैं इसे कैनवास पर खींचता हूं, तो ऐसा नहीं होता है। कोई विचार?

कोड यह रहा:

drawing = new Image() 
drawing.src = "draw.png" 
context.drawImage(drawing,0,0); 

Answer 1

यह ठीक से काम करना चाहिए, कर रहे हैं क्या आप वाकई अपनी छवि वास्तव में पारदर्शी और न सिर्फ पृष्ठभूमि में सफेद है?

http://jsfiddle.net/5P2Ms/

Answer 2

आप एक पाश प्रस्तुत करना में यह बना रहे हैं, तो आप context.clearRect(0, 0, width, height) चलाने के लिए सुनिश्चित करने की आवश्यकता:

यहाँ के बंद अपने कोड के आधार के लिए एक काले रंग की आयत पर एक पारदर्शी PNG ड्राइंग का एक उदाहरण है सबसे पहले, अन्यथा आप केवल प्रत्येक फ्रेम को पीएनजी पर पीएनजी लिख रहे हैं, जो अंत में अपारदर्शी होगा। (लेकिन फ्रेम तेजी से प्रस्तुत करते हैं, इसलिए आप इसे नग्न आंखों से नहीं देख पाएंगे।)

Answer 3

छवि के लोड ईवेंट में ईवेंट श्रोता जोड़ने के लिए मत भूलना। छवि लोडिंग कुछ ऐसा होता है जो पृष्ठभूमि में होता है, इसलिए जब जावास्क्रिप्ट दुभाषिया canvas.drawImage भाग में जाता है तो यह संभवतः छवि को लोड नहीं किया जाएगा और सामग्री के बिना, केवल एक खाली छवि वस्तु है।

drawing = new Image(); 
drawing.src = "draw.png"; // can also be a remote URL e.g. http:// 
drawing.onload = function() { 
    context.drawImage(drawing,0,0); 
}; 

Answer 4

एनबी, आप canvas.toDataURL का इस्तेमाल किया गया है और आप कुछ भी करने के लिए माइम प्रकार सेट की तुलना में कहना gif या png, छवि के पारदर्शी हिस्सों पूरी तरह से काला हो सकता है अगर।

drawing = new Image(); 
drawing.onload = function() { 
    context.drawImage(drawing,0,0); 
    var base64 = canvas.toDataURL('image/png', 1); 
}; 
drawing.src = "draw.png"; 

Answer 5

आप बस Image वस्तु का उपयोग कर किसी भी पारदर्शी छवि सम्मिलित कर सकते हैं:

var canvas=document.getElementById("canvas"); 
 
var context=canvas.getContext('2d'); 
 
var image=new Image(); 
 
image.onload=function(){ 
 
context.drawImage(image,0,0,canvas.width,canvas.height); 
 
}; 
 
image.src="http://www.lunapic.com/editor/premade/transparent.gif";

<canvas id="canvas" width="500" height="500">your canvas loads here</canvas>