1

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?

dda
  • 6,030
  • 2
  • 25
  • 34
Kim Stacks
  • 10,202
  • 35
  • 151
  • 282
  • 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 Nov 14 '12 at 05: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 Nov 14 '12 at 06:01

3 Answers3

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.

mattc
  • 485
  • 3
  • 9
  • 1
    Thank you mattc. Then when I use photoshop and there is this setting that says resolution in pixels/inch is 72. Is there a way to detect this resolution on the image itself? I apologize for the wrong lingo used – Kim Stacks Nov 14 '12 at 05:54
  • No problem, it is a common misconception when working with photoshop. The size displayed on the screen is independent of the DPI. DPI may be available as meta data in the image, but it isn't required so I wouldn't count on it being there. A good reference for info about DPI, PPI, etc is available here: http://bjango.com/articles/ppiisatag/ – mattc Nov 14 '12 at 06:04
  • So I guess I just need to change my question to PPI of image yes? – Kim Stacks Nov 14 '12 at 06:06
  • The point is that when displaying an image on a screen, a pixel takes up exactly the size of one pixel. You don't know how big that is, unless you know the resolution of the monitor/screen that it is being displayed on. The PPI of a mobile device is very large, while on a standard computer monitor it is relatively small. It doesn't depend on the image file or any meta data in it, but on the actual hardware it's being displayed on. – mattc Nov 14 '12 at 06:11
  • If the DPI or PPI is set in the image meta data, you could use this javascript tool to retrieve it: http://www.nihilogic.dk/labs/imageinfo/ – mattc Nov 14 '12 at 06:25
0

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

I would also recommend reading this answer here on SO.

Community
  • 1
  • 1
Labu
  • 2,572
  • 30
  • 34
0

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.

Gaurav Raj
  • 699
  • 6
  • 21