HTML5 Tuval toDataURL boş çıkıyor

Question

Resim dosyalarını yüklemek, tuval üzerine çizmek, değişiklik yapmak ve veritabanına kaydetmek istedim. Tuval resminin (Pic) döndüğü base64 değerini test etmeye çalıştım ve boş. Ancak, belgeye tuvali (Pic) eklediğimde sonucu görüyorum. Burada neyi yanlış yapıyorum?

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

Sezgim var imageData = … gelen her şeyi img.onload fonksiyonuna gitmek gerektiğini söylüyor.

anlamına Yani, ilgili kısmında kod olur:

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; 

nedeni görüntü yüklendikten sonra hat

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

doğru yürütür olmasıdır. Ancak maalesef, bu satır yürütüldüğünde yükleme işlemini beklemezsiniz:

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

ve sonraki tüm satırlar.

Görüntünün tuval üzerine çizilmesi için yüklenmesi gerekir. Tuvalin, getImageData numaralı telefonu aramak için yüklenmiş resmi içermesi gerekir.