Getting width & height of an image with filereader

Question

I am building an image resize/crop, and I\'d like to show a live preview after they\'ve edited it in a modal (bootstrap). This should work, I believe, but I just ge

Answer 1

You have to wait for the image to load. Try handling the element inside .onload.

I've also simplified the process of setting the source of the two elements to how you should be doing it (with jQuery).

reader.onload = (function(theFile) { 
    var image = new Image();
    image.src = theFile.target.result;

    image.onload = function() {
        // access image size here 
        console.log(this.width);

        $('#imgresizepreview, #profilepicturepreview').attr('src', this.src);
    };
});