एचटीएमएल 5 कैनवास: ड्राइंग समाप्त होने पर ईवेंट प्राप्त करें

Question

मैं एक कैनवास तत्व में एक छवि खींच रहा हूं। मेरे पास तब कोड है जो इस प्रक्रिया को समाप्त होने पर निर्भर करता है। मेरा कोड इस तरह दिखता है:

var myContext = myCanvasElement.getContext('2d'), 
    myImg = new Image(); 

myImg.onload = function() { 
    myContext.drawImage(containerImg, 0, 0, 300, 300); 
}; 

myImg.src = "someImage.png"; 

तो अब ड्राइमेज होने पर मुझे अधिसूचित करना होगा। मैंने spec की जांच की लेकिन मुझे या तो कोई ईवेंट या कॉलबैक फ़ंक्शन पास करने की संभावना नहीं मिली। अब तक मैंने बस एक टाइमआउट निर्धारित किया है, लेकिन यह स्पष्ट रूप से बहुत टिकाऊ नहीं है। आपके द्वारा इस समस्या को कैसे हल किया जाएगा?

Answer 1

लगभग सभी जावास्क्रिप्ट कार्यों की तरह, drawImageतुल्यकालिक है।

यही है, यह वास्तव में ऐसा करने के बाद ही लौटाएगा जो इसे करने के लिए किया जाता है।

Answer 2

छवि लोड होने पर आपके पास पहले से ही एक ईवेंट है, और आप एक चीज (ड्रा) करते हैं। एक और क्यों नहीं करें और फ़ंक्शन को कॉल करें जो drawImage के बाद जो कुछ भी करना है, वह करेगा? सचमुच:

myImg.onload = function() { 
    myContext.drawImage(containerImg, 0, 0, 300, 300); 
    notify(); // guaranteed to be called after drawImage 
}; 

Answer 3

Jef क्लेस यह बहुत अच्छी तरह से on his website बताते हैं:

ब्राउज़र लोड छवियों एसिंक्रोनस रूप से, जबकि स्क्रिप्ट पहले से ही व्याख्या की और मार डाला जा रहा है। अगर छवि पूरी तरह से लोड नहीं होती है तो कैनवास इसे प्रस्तुत करने में विफल रहता है।

सौभाग्य से इसे हल करना मुश्किल नहीं है। हमें ड्राइंग शुरू करने के लिए बस इंतजार करना है जब तक कि हमें छवि से कॉलबैक प्राप्त न हो जाए, लोडिंग लोड हो रहा है।

<script type="text/javascript">   
window.addEventListener("load", draw, true); 

function draw(){          
    var img = new Image(); 
    img.src = "http://3.bp.blogspot.com/_0sKGHtXHSes/TPt5KD-xQDI/AAAAAAAAA0s/udx3iWAzUeo/s1600/aspnethomepageplusdevtools.PNG";     
    img.onload = function(){ 
     var canvas = document.getElementById('canvas'); 
     var context = canvas.getContext('2d');  

     context.drawImage(img, 0, 0);   
    };    
}