HTML5 Canvas toDataURL trả lại trống

Question

Tôi muốn tải lên các tệp hình ảnh, vẽ chúng vào canvas, thực hiện thay đổi và lưu nó trong cơ sở dữ liệu. Tôi đã thử kiểm tra giá trị base64 mà hình ảnh canvas (Pic) trả lại và nó trống. Tuy nhiên, tôi thấy kết quả khi tôi thêm canvas (Pic) vào tài liệu. Tôi làm gì sai ở đây?

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

trực giác của tôi nói rằng tất cả mọi thứ từ var imageData = … nên đi vào img.onload chức năng.

Điều đó có nghĩa, ở phần liên quan mã trở thành:

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; 

Lý do là dòng

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

một cách chính xác thực hiện sau khi hình ảnh đã được tải. Nhưng rất tiếc, bạn không đợi tải khi dòng này được thực hiện:

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

và tất cả các dòng tiếp theo.

Hình ảnh cần được tải để vẽ hình ảnh trên canvas. Canvas cần chứa hình ảnh được tải để gọi getImageData.