FileReaderの+キャンバス画像の読み込みに問題

Question

私はこのコードをクライアントブラウザ上でいくつかの画像をロードするためにtraingています：

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); 
} 

が、問題は、私はimg.width性質を持っていないwher、reader.onload機能であり。それでもゼロに設定されています。この現象はクロムにもあるので、おそらく私のせいでしょう。 あなたは私に言うことができます、どこに問題がありますか？私はまだFileReaderのオブジェクトに働いていない

Answer 1

おかげで、JVは、しかし、私の知る限り、問題は次のとおりです。あなたがimg.srcに値を割り当てた後、画像がすぐに利用できません。最初にロードする必要があります。少なくともリモートファイルを操作する場合はそれがどのようにロードされるかです。 img要素は、イメージの読み込みが完了するとすぐにonloadイベントを発生させます。あなたがデータURLを割り当てた場合、これも当てはまります。このイベントを聞いて、そこからcreateImgCanvasを呼び出す必要があります。