CODEWITHSUNDEEP
javascripthtml
panthro
panthro

Reputation: 24061

Reading width of an image using file reader?

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

Upvotes: 0

Views: 2615

Answers (2)

Alex Slipknot
Alex Slipknot

Reputation: 2533

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

Upvotes: 3

abraham63
abraham63

Reputation: 443

maybe your image object is not loaded try this :

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

Upvotes: 3

Related Questions