HTML5 Canvas toDataURL gibt

Question

zurück Ich wollte die Bilddateien hochladen, sie in Canvas zeichnen, Änderungen vornehmen und in der Datenbank speichern. Ich habe versucht, den Base64-Wert zu testen, den das Canvas-Bild (Pic) zurückgegeben hat, und es ist leer. Allerdings sehe ich das Ergebnis, wenn ich die Leinwand (Pic) an das Dokument anfügen. Was mache ich hier falsch?

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

Meine Intuition sagt, dass alles von var imageData = … in die img.onload Funktion gehen sollte.

Das heißt, auf den betreffenden Teil wird der Code:

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; 

Der Grund dafür, dass die Leitung

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

korrekt ausführt, nachdem das Bild geladen wurde. Aber Sie warten nicht auf das Laden, wenn diese Zeile ausgeführt wird:

und alle folgenden Zeilen.

Das Bild muss geladen werden, um es auf die Leinwand zu zeichnen. Die Leinwand muss das geladene Bild enthalten, um getImageData aufrufen zu können.