В обработчике
$('#usrpfile').on("change", function() {
изменения элемента
<input id="usrpfile" type="file"
не всегда корректно определяется ширина и высота изображения. То верно, то неверно, искажая пропорции рисунка выводимого в соответствующем контейнере.
Для небольших файлов, например 37 Кб, возвращает габариты неверно, как бы не 'успевает' возвращать правильную ширину-realWidthPic и высоту-realHeightPic. Поэтому использовал сначала метод setTimeout, вроде заработало. Затем понадобилось на время определения ширины и высоты прятать рисунок, и вновь его отображать после установки подогнанных размеров.
Скрытие и отображение при этом стало работать ( с точки зрения корректного определения ширины и высота рисунка) и без setTimeout.
То есть проблема как бы решена, просто остались сомнения что какое-либо сочетание размеров файла и периода их обработки может вылезти боком.
Прошу подсказать обоснованы ли эти сомнения и верно ли в принципе такое решение?
$('#usrpfile').on("change", function(){ // #1, при изменении <input id="usrpfile" type="file">
file = this.files[0]; // Получаем файл из <input type="file") - элемент массива files[0]
// вставка контейнеров, img и ссылки 'удалить'
$("<div class='occupiedImgCont'><div class='occupiedImg-wrapper'><img id='usrpPhoto' src='' /></div><div class ='clear'></div><div class='userpic-del'><a class='del_usrp' href='#'>Удалить фото</a></div></div>").insertBefore($('.emptyImgCont'));
uploadImage = $('#usrpPhoto'); // пустой объект <img id='usrpPhoto'
var oReaderUploadPic = new FileReader(); // объект FileReader
oReaderUploadPic.onload = (function() { // #C
return function(e) { // #B
uploadImage.attr('src', e.target.result);
uploadImage.hide(); // скрываем рис. на время определения его ширины и высоты
// setTimeout (function(){ // отсрочка 10 мс
realWidthPic = uploadImage.width(); // ширина изображения (px)
realHeightPic = uploadImage.height(); // высота изображения (px)
ratioPic = realWidthPic / realHeightPic;
// ширина и высота контейнера изображения
var imgContWidth = $('.occupiedImg-wrapper').width()-6,
imgContHeight = $('.occupiedImg-wrapper').height()-6;
// Подгонка размера загруженной картинки под контейнер
if (realWidthPic > realHeightPic) {
if ((imgContWidth/ratioPic) <= imgContHeight) {
fittedWidthPic = imgContWidth;
fittedHeightPic = fittedWidthPic / ratioPic;
} else {
fittedHeightPic = imgContHeight;
fittedWidthPic = fittedHeightPic * ratioPic;
}
} else {
fittedHeightPic = imgContHeight;
fittedWidthPic = fittedHeightPic * ratioPic;
}
// установка подогнанных размеров изображения
uploadImage.height(fittedHeightPic);
uploadImage.width(fittedWidthPic);
uploadImage.show();
// }, 10); // отсрочка выполнения на 10мс, можно даже поставить 0-эффект тот же
}; // end #B
})(); // end #C
oReaderUploadPic.readAsDataURL(file); // считываем текущий image file как data URL
}); // end#1
