एचटीएमएल 5 कैनवास छवियां दिखाती हैं या छवि लोड नहीं होती

Question

मैं कॉपीराइट कारण के लिए लिंक हटा देता हूं! क्षमा करें!

जब आप फ़ायरफ़ॉक्स में कर रहे हैं, बाएं (सभी mockup) पर छवियों लोड किया जाता है, कुछ ताज़ा करने के बाद, क्रोम और सफारी में, यह कभी नहीं दिखाने

मुझे लगता है कि यह स्मृति समस्या में लोड नहीं एक छवि है , लेकिन मुझे पता नहीं है कि छवि कब लोड हो रही है, मैं घटना को अंत में स्क्रिप्ट डालता हूं, लेकिन कोई भाग्य

तो प्रश्न, छवियों को सुर बनाने के लिए क्या करना चाहिए .. वहां है और त्रुटि जावास्क्रिप्ट कोड?

एनबी। मुझे छवियों को कैनवास डिस्प्ले के लिए बेस 64 के रूप में एन्कोड करने के बारे में कठिन है ... क्या ऐसा करना संभव है या बुद्धिमान है?

Answer 1

दरअसल, आप यह निर्धारित कर सकते हैं कि सभी छवियां लोड होने पर समाप्त हो गई हैं। ऐसा करने के लिए, आपको छवि ऑब्जेक्ट की onload संपत्ति के लिए केवल कॉलबैक फ़ंक्शन निर्दिष्ट करने की आवश्यकता है। इसलिए, जब आप कुछ इस तरह (कोड आप पहले से ही canvas.js में है के अलावा) के साथ खत्म हो जाएगा:

var loaded_images = 0; 
var image_objects = []; 

// This is called once all the images have finished loading. 
function drawOnCanvas() { 
    for (var i = 0; i < image_objects.length; ++i) { 
     ctx.drawImage(image_objects[i], 0, 0); 
    } 
} 

function handleLoadedImage() { 
    ++loaded_images; 

    // Check to see if all the images have loaded. 
    if (loaded_images == 7) { 
     drawOnCanvas(); 
    } 
} 

document.ready = function() { 
    for (var i=0;i<myimages.length;i++) { 
     var tempimage = new Image(); 
     tempimage.src= myimages[i]; 
     tempimage.onload = handleLoadedImage; 
     image_objects[i] = tempimage; 
    } 
} 

मुख्य अवधारणा है कि आप ऐसी छवियों लोड हो रहा है समाप्त कर दिया है की संख्या पर नज़र रखने रहे हैं। एक बार सभी छवियों को लोड हो जाने के बाद, आप जानते हैं कि आप कैनवास पर आकर्षित कर सकते हैं।