HTML 5 文件阅读器图像大小在第一次加载时不正确答案

【问题标题】：HTML 5 file reader image size not correct on the first loadHTML 5 文件阅读器图像大小在第一次加载时不正确
【发布时间】：2012-01-26 17:56:52
【问题描述】：

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

}

【问题讨论】：

标签： jquery image file html filereader

【解决方案1】：

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

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

【讨论】：

【解决方案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;

这应该可以...

【讨论】：