을 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 기능에있다 . 여전히 0으로 설정됩니다. 이 동작은 크롬에서도 발생하므로 아마도 내 잘못 일 수 있습니다. 나 한테 말할 수 있니, 문제가 어디 있니? 나는 아직을 FileReader 객체에 근무 한 적이없는

Answer 1

감사합니다, JV 그러나, 지금까지 내가 말할 수있는 문제는 다음과 같습니다 당신이 img.src에 값을 할당 한 후 이미지가 즉시 사용할 수 없습니다 . 먼저로드해야합니다. 적어도 원격 파일을 사용하여 작업하는 경우입니다. img 요소는 이미지로드가 완료되면 onload 이벤트를 발생시킵니다. 데이터 URL을 지정하면이 또한 사실이라고 가정합니다. 이 이벤트를 청취하고 거기에서 createImgCanvas를 호출해야합니다.