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?

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?

• javascript
• image
• html
• resolution
• dpi

• You can't calculate the size of client device in 'inches' by no client side/server side means. Sure you can do that in pixels. – anuj_io Commented Nov 14, 2012 at 5:57
• @tea_totaler i meant the image. I want to calculate the files resolution. You know how you can see the resolution of an image in photoshop that shows in pixels/inch ? – Kim Stacks Commented Nov 14, 2012 at 6:01

3 Answers 3

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.

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

I would also remend reading this answer here on SO.

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.