Question

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

}

Answer 1

在分配src后，img元素也将触发“onload”事件。你必须听听。

问题类似于： FileReader+canvas image loading problem

Answer 2

在您的代码中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;

这应该有用......

第一次加载时HTML 5文件读取器图像大小不正确

2 个答案: