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

abraham63 · Accepted Answer · 2017-05-03 11:03:50Z

3

maybe your image object is not loaded try this :

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

answered May 3, 2017 at 11:03

abraham63

4434 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

panthro Over a year ago

Surely the fileReader on load event covers this, what's the difference between the two?

abraham63 Over a year ago

Generaly I use both. Because some time when you read the image file and then put the content in your javascript it's take some times so onload avoid this time laps problem.

Yury Tarabanko Over a year ago

@panthro "Surely the fileReader on load event covers this" No. You need both load events. codepen.io/tarabyte/pen/PmKwyK

Alex Slipknot · Accepted Answer · 2017-05-03 11:33:57Z

3

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

edited May 3, 2017 at 11:33

answered May 3, 2017 at 11:05

Alex Slipknot

2,5331 gold badge20 silver badges28 bronze badges

2 Comments

Alex Slipknot Over a year ago

@panthro seems like all ok. Attached snippet

Alex Slipknot Over a year ago

@Yury Tarabanko Thanks! Updated for Chrome

Collectives™ on Stack Overflow

Reading width of an image using file reader?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related