FileReader+canvas проблема загрузки изображений
Я пытаюсь загрузить некоторые изображения в клиентский браузер с помощью этого кода:
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);
}
Но есть проблема в читателе.функция onload, где у меня нет img.свойство width. По-прежнему установлен в ноль. Такое поведение есть и в chrome, так что, вероятно, это будет моя вина. Не могли бы вы сказать мне, в чем проблема, пожалуйста?
Спасибо, СП
1 ответ:
Я еще не работал с объектом FileReader, однако, насколько я могу судить, проблема заключается в следующем: после присвоения значения
img.src
изображение не сразу доступно. Он должен быть загружен первым - по крайней мере, если вы работаете с удаленными файлами. Элемент img запустит событие onload, как только изображение будет загружено. Я предполагаю, что это также верно, если вы назначаете url-адрес данных. Вы должны прислушаться к этому событию и позвонить своему createImgCanvas оттуда.