CODEWITHSUNDEEP
javascriptimagehtmlresolutiondpi
Kim Stacks
Kim Stacks

Reputation: 10832

How do I find the resolution of an uploaded image using HTML5 or Javascript?

My application uses the File API in HTML5 to have drag and drop capabilities. I also needed to ensure that the files that are dropped obey a 72 pixels/inch resolution ratio.

How do I find the resolution of the image using HTML5 or Javascript?

Upvotes: 1

Views: 7260

Answers (3)

Gaurav Raj
Gaurav Raj

Reputation: 708

You can use blueimp Javascript-Load-Image library. You can use exif data parsing methods to parse image dpi and other informations from the image. You can load the image locally from file tags or from the image urls as per requirement.

Mostly jpeg images and raw image formats store dpi information in exif data. Other formats like png don't have provisions for exif data and hence dpi of such images are difficult to extract without actually loading them in image editing tools like photoshop.

Upvotes: 0

Labu
Labu

Reputation: 2582

Here's a (slightly outdated) JavaScript EXIF Reader.

I would also recommend reading this answer here on SO.

Upvotes: 0

mattc
mattc

Reputation: 495

DPI is a hardware measurement, more specifically used in print, and doesn't apply to image data when viewed on a screen. A pixel is a pixel and the size of it depends on the resolution of the screen you are viewing it on, not a setting in the image file.

If an image is 72 DPI and 72 px wide, it will show up as 72 px wide. If an image is 144 DPI and 72 px wide, it will show up as the same size on the screen. However, in print the 144 DPI image will be half the width as th 72 DPI image.

Upvotes: 4

Related Questions