Reading width of an image using file reader?

Question

I'm having issues reading sizes with file reader. Have tried various browsers and files, width always comes back as 0.

    var fileReader = new FileReader();
    var img = new Image();

    fileReader.onload = function(event) {
        img.src = event.target.result;
        console.log(img.width);

    };

    fileReader.onerror = function() {

        //handle error
    };

    fileReader.readAsDataURL(file);

The file var is looped out from the following on a drag and drop event:

e.originalEvent.dataTransfer.files

Answer 1

也许您的图片对象未加载，请尝试以下操作：

img.onload = function () {console.log(img.width)}

Answer 2

I think you have an error while assigning binary data to Image.

Assigning image:

fileReader.onload = function(e) {
    var img = new Image();
    img.src = fileReader.result;
}

Demo:

 document.getElementById('img').addEventListener('change', function(e) { var file = this.files[0]; var fileReader = new FileReader(); var img = new Image(); fileReader.onload = function(event) { img.src = fileReader.result; img.onload = function() { console.log(img.width); } document.getElementById('result').appendChild(img); }; fileReader.readAsDataURL(file); }) 

 <input id="img" type="file"> <div id="result"></div> 

see codepen demo or jsfiddle