toDataURL（）沒有返回有效圖像，除非先發出警告

Question

我從HTML表單上傳圖像並使用Image（）在畫布上調整圖像大小。

以下是我有：

var MAX_HEIGHT = 10; 
var target = document.getElementById("filesInfo"); 
var preview = document.getElementById("preview"); 
var canvas = document.getElementById("canvas"); 

var render = function(src) 
{ 
    var img = new Image(); 

    img.onload = function() 
    { 
     if(img.height > MAX_HEIGHT) 
     { 
      img.width *= MAX_HEIGHT/img.height; 
      img.height = MAX_HEIGHT; 
     } 

     var ctx = canvas.getContext("2d"); 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     preview.style.width = img.width + "px"; 
     preview.style.height = img.height + "px"; 
     canvas.width = img.width; 
     canvas.height = img.height; 
     ctx.drawImage(img, 0, 0, img.width, img.height); 
    }; 
    img.src = src; 
}; 

function fileSelect(evt) 
{ 
    var files = evt.target.files; 
    var result = ''; 
    var file; 

    for (var i = 0; file = files[i]; i++) 
    { 
     if (!file.type.match('image.*')) 
      continue; 
     reader = new FileReader(); 
     reader.onload = function(e) 
     { 
      render(e.target.result); 
     }; 
     reader.readAsDataURL(file); 
     alert('foo'); 
     result += '<li>' + file.name + ' ' + file.size 
     + ' bytes <img src="'+document.getElementById("canvas").toDataURL()+'"></li>'; 

    } 
    document.getElementById('filesInfo').innerHTML = '<ul>' + result + '</ul>'; 
} 

如果我刪除警報（「富」），然後圖像數據不進來（這是一個空白圖像）。只有當我插入警報時，它纔會起作用。我在這裏錯過了什麼？

Answer 1

你的代碼是好的，你就必須等到加載完成後，警報將迫使代碼，導致實際的代碼休息警報之前再繼續：

reader.readAsDataURL(file); 

reader.onloadend = function() { 

    result += '<li>' + file.name + ' ' + file.size + ' bytes <img src="'+document.getElementById("canvas").toDataURL()+'"></li>'; 



    } 

來源： https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL