FileReader + проблема загрузки изображения холста - PullRequest
Новая
       18

FileReader + проблема загрузки изображения холста

3 голосов
/ 14 мая 2011

Я загружаю некоторые изображения в браузер клиента с помощью этого кода: 

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, если у меня нет свойства img.width. Все еще установлено в ноль. Это поведение также в Chrome, так что, вероятно, это будет моя вина. Не могли бы вы сказать мне, где проблема, пожалуйста?

Спасибо, СП

1 Ответ

4 голосов
/ 14 мая 2011

Я еще не работал с объектом FileReader, однако, насколько я могу судить, проблема заключается в следующем: после того, как вы присвоили значение для img.src, изображение не доступно сразу.Сначала его нужно загрузить - по крайней мере, так оно и есть, если вы работаете с удаленными файлами.Элемент img будет запускать событие onload, как только изображение будет загружено.Я предполагаю, что это также верно, если вы назначаете URL-адрес данных.Вы должны прослушать это событие и вызвать ваш createImgCanvas оттуда.

...