Question

176

Getting image dimensions using the JavaScript File API

rated 0 times [ 183] [ 7] / answers: 1 / hits: 92916 / 13 Years ago, sun, september 18, 2011, 12:00:00

I require to generate a thumbnail of an image in my web application. I make use of the HTML5 File API to generate the thumbnail.

I made use of the examples from Read files in JavaScript to generate the thumbnails.

I am successfully able to generate the thumbnails, but I am able to generate thumbnail only by using a static size. Is there a way to get the file dimensions from the selected file and then create the Image object?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

leslijessalyng

Add To Favorites

Follow

Total Points: 650

Total Questions: 85

Total Answers: 109

Location: Croatia

Member since Mon, Sep 6, 2021

3 Years ago

leslijessalyng questions

1 Vue dist path for CSS and JS not found

Fri, Feb 21, 20, 00:00, 4 Years ago

1 How do I loop through multiple pages in an API?

Tue, Jul 30, 19, 00:00, 5 Years ago

1 ReactJS and autofocus

Fri, Jul 5, 19, 00:00, 5 Years ago

1 How to fix The message port closed before a response was received. after window.location.reload() in javascript

Wed, Apr 3, 19, 00:00, 5 Years ago

1 TypeError: $ .find is not a function

Wed, Mar 13, 19, 00:00, 5 Years ago

View All

answered 13 Years ago tyemathewj · Accepted Answer

Yes, read the file as a data URL and pass that data URL to the src of an Image: http://jsfiddle.net/pimvdb/eD2Ez/2/.

var fr = new FileReader;



fr.onload = function() { // file is loaded

    var img = new Image;



    img.onload = function() {

        alert(img.width); // image is loaded; sizes are available

    };



    img.src = fr.result; // is the data URL because called with readAsDataURL

};



fr.readAsDataURL(this.files[0]); // I'm using a <input type=file> for demonstrating