如何使用HTML5或Javascript找到上传图像的分辨率？

Question

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?

Answer 1

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.

Answer 2

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

I would also recommend reading this answer here on SO.

Answer 3

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.