FileReader+Leinwandbild-Ladeproblem

Question

Ich versuche, mit diesem Code einige Bilder im Client-Browser zu laden:

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

aber es gibt ein Problem in der Funktion reader.onload, bei der ich die Eigenschaft img.width nicht habe. Ist immer noch auf Null gesetzt. Dieses Verhalten ist in Chrome auch, so dass es wahrscheinlich mein Fehler sein. Könnten Sie mir bitte sagen, wo das Problem liegt?

Danke, JV

Answer 1

Ich habe noch nicht mit dem FileReader-Objekt gearbeitet, aber soweit ich das beurteilen kann, ist das Problem das folgende: Nachdem Sie einen Wert zugewiesen haben img.src das Bild ist nicht sofort verfügbar. Es muss erst geladen werden - zumindest ist das so, wenn Sie mit Remote-Dateien arbeiten. Das img-Element löst ein onload-Ereignis aus, sobald das Bild fertig geladen ist. Ich nehme an, dass dies auch der Fall ist, wenn Sie eine Datenurl zuweisen. Sie sollten auf dieses Ereignis warten und Ihr createImgCanvas von dort aus aufrufen.