Неправильный размер изображения в программе чтения файлов HTML 5 при первой загрузке - PullRequest
Новая
       22

Неправильный размер изображения в программе чтения файлов HTML 5 при первой загрузке

0 голосов
/ 23 декабря 2011

У меня очень странная проблема со средством чтения файлов HTML 5.Я загружаю изображение и добавляю его к указанному.Как ни странно, иногда изображение имеет неправильный размер или не отображается вообще, но когда я снова загружаю то же изображение, оно прекрасно работает.Firebug говорит мне, что изображение загружается правильно в любом случае.

Вот как я это делаю: 

function getImg(evt, id) {
var files = evt.target.files;
var file = files[0]
var filename = file.name;
previewimg = filename;
var reader = new FileReader();
reader.onload = function(e) {
    //to empty the div every time a new image is loaded
    $(id).empty();
    readImgData(e, id, filename);
}
reader.readAsDataURL(file);
}
function readImgData(e, id, filename) {
var img = new Image();
img.name = filename;
var split = filename.split('.');
img.id = split[0]
img.src = e.target.result;
$(id).append(img);
var jimg = $("#" + img.id);
var width = jimg.width();
var height = jimg.height();
console.log('width: ' + width + " height: " + height);
if(id == '#showpreview') {
    jimg.attr({
        'id' : img.id + 'prev'
    });
    console.log(id)
    if(width > 400) {
        var divider = width / 400;
        var newheight = height / divider;
        jimg.css({
            'width' : 400,
            'height' : newheight
        });
    }
}

}

Ответы [ 2 ]

0 голосов
/ 20 мая 2013

В вашем коде var width = jimg.width(); будет выполнено до полной загрузки вашего изображения.

Вы должны добавить обработчик событий загрузки к вашему изображению, чтобы получить размеры изображения.

Добавьте что-то подобное в вашу readImgData функцию 

var img = new Image();
img.onload = function(evt) {
   var width = this.width;
   var height = this.height;
            console.log("Width " + width + ", Height : " + height);
    };
img.src = e.target.result;

это должно работать ...

0 голосов
/ 22 апреля 2012

Элемент img также вызовет событие onload после того, как вы назначите src.Вы должны слушать это.

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

...