html5 tuval resimleri gösterme ve kaydetme yok

Question

Bağlantıları kaldırmak için telif hakkı nedeni! .. üzgünüm!

Firefox olduğunda, sola (bütün mockup) de görüntülerin Ben hafıza sorunu yüklü bir görüntü olduğunu düşünüyorum krom ve safari, bu ASLA

göstermek, bir kaç yenilendikten sonra yüklenir , ama görüntü tüm yüklendiğini bilemiyorum, olay sonunda betik koymak, ama hayır şans

Yani soru, görüntüleri yüklü yapmak için ne yapmalı? .. orada ve hata var JavaScript kodu?

n.b. Resimlerin tuval resmi için base64 olarak kodlanması konusunda zorlanıyorum ... bunu yapmak mümkün mü yoksa akıllı mı?

Answer 1

Aslında, tüm görüntülerin ne zaman yükleneceğini belirtebilirsiniz. Bunu yapmak için, görüntü nesnesinin onload özelliği için bir geri arama işlevi belirtmeniz yeterlidir. Yani, (zaten canvas.js sahip koduna ek olarak) böyle bir şey ile sona ereceğini:

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; 
    } 
} 

anahtar kavram size yüklenmesi bittikten resim sayısı takip olmasıdır. Tüm görüntüler yüklenince, tuvali çizebileceğinizi biliyorsunuz.