HTML5 Canvas toDataURL restituisce vuoto

Question

Volevo caricare i file immagine, disegnarli su tela, apportare modifiche e salvarlo nel database. Ho provato a testare il valore base64 che l'immagine canvas (Pic) ha restituito ed è vuota. Tuttavia, vedo il risultato quando aggiungo la tela (Pic) al documento. Cosa sto facendo di sbagliato qui?

function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object     
    for (var i = 0, f; f = files[i]; i++) { 

    if (!f.type.match('image.*')) { 
     continue; 
    } 
    // read contents of files asynchronously 
    var reader = new FileReader(); 

    // Closure to capture the file information. 
    reader.onload = (function(theFile) { 
     return function(e) { 

     var canvas = document.createElement("canvas"); 

     var datauri = event.target.result, 
      ctx = canvas.getContext("2d"), 
      img = new Image(); 

     img.onload = function() { 

      canvas.width = width; 
      canvas.height = height; 
      ctx.drawImage(img, 0, 0, width, height); 
     }; 
     img.src = datauri; 
     var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); 

     document.body.appendChild(canvas); //picture gets uploaded      

     // Generate the image data 

     var Pic = canvas.toDataURL("image/png"); 

     console.log(Pic); // => returns base64 value which when tested equivalent to blank        
     Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "") 

     // Sending image to Server 
     $.ajax({ 
      // … 
     }); 

     }; 
    })(f); 
    reader.readAsDataURL(f); 
    } 
} 

Answer 1

mio intuito dice che tutto da var imageData = … dovrebbe andare in funzione img.onload.

Ciò significa, in parte pertinente il codice diventa:

img.onload = function() { 
    canvas.width = width; 
    canvas.height = height; 
    ctx.drawImage(img, 0, 0, width, height); 

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

    document.body.appendChild(canvas); //picture gets uploaded      

    // Generate the image data 

    var Pic = canvas.toDataURL("image/png"); 

    console.log(Pic); // => returns base64 value which when tested equivalent to blank        
    Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "") 

    // Sending image to Server 
    $.ajax({ 
    // … 
    }); 
}; 
img.src = datauri; 

La ragione è che la linea

ctx.drawImage(img, 0, 0, width, height); 

esegue correttamente dopo che l'immagine è stata caricata. Sfortunatamente, non si attende il caricamento quando viene eseguita questa riga:

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

e tutte le righe successive.

L'immagine deve essere caricata per disegnarla sulla tela. La tela deve contenere l'immagine caricata per chiamare getImageData.