的FileReader +帆布圖像加載問題

Question

我國家隊訓練上加載客戶端瀏覽器的一些圖像與此代碼：

function addFiles() 
    var input = document.querySelector("input[type='file']"); 
    var files = input.files; 
    var previewEl = document.getElementById("preview"); 
    for (var i = 0; i < files.length; i++) { 
     if (!files[i].type.match(/image.*/)) { 
      alert("This is not image!"); 
      continue; 
     }; 
     var divEnvelop = document.createElement('div'); 
     divEnvelop.setAttribute('class','imgPrevEnvelop'); 
     divEnvelop.setAttribute('id',"img"+i); 
     previewEl.appendChild(divEnvelop); 
     var img = document.createElement("img"); 
     img.file = files[i]; 
     var reader = new FileReader(); 
     reader.onload = (function(aImg, aName, aEnvelop) { return function(e) { 
      aImg.src = e.target.result; 
//here I don't have img.width - problem 
      createImgCanvas(aImg, aImg.width, aImg.height, 300, 300, aName, aEnvelop); 
     }; })(img,files[i].name, divEnvelop); 
     reader.readAsDataURL(files[i]); 
    } 
} 
function createImgCanvas(img, imgWidth, imgHeight, width, height, label, divEnvelop) { 
    if (imgWidth > imgHeight) { 
     if (imgWidth > width) { 
     imgHeight *= width/imgWidth; 
     imgWidth = width; 
     } 
    } else { 
     if (imgHeight > height) { 
     imgWidth *= height/imgHeight; 
     imgHeight = height; 
     } 
    } 
    var canvas = document.createElement('canvas'); 
    canvas.setAttribute('id',label); 
    canvas.width = imgWidth; 
    canvas.height = imgHeight; 
    var imageCanvas2D = canvas.getContext("2d"); 
    try{ 
     imageCanvas2D.drawImage(img, 0, 0, imgWidth, imgHeight); 
    } catch(err) { alert(err);} 
    divEnvelop.appendChild(canvas); 
} 

但問題reader.onload功能，wher我沒有img.width財產。仍然設置爲零。這種行爲也在鉻，所以這可能是我的錯。 你能說我，請問問題在哪裏？

感謝，JV

Answer 1

我沒有用的FileReader對象還沒有工作，但是，據我所知道的，問題是：你分配一個值img.src後的圖像不是即時可用。它必須先加載 - 至少這是如何處理遠程文件。一旦圖像完成加載，img元素將觸發一個onload事件。我認爲這也是如果你分配一個數據網址。你應該聽這個事件，並從那裏調用你的createImgCanvas。