Image Dpi using javascript

Question

Can I know an image dpi (horizontal and vertical resolution) using javascript ?

Are you just looking for the image's size in pixels or the actual resolution of the image? — Ryan, Dec 03 '09 at 13:55
Duplicate: http://stackoverflow.com/questions/476815/can-you-access-sceen-displays-dpi-settings-in-a-javascript-function — Tim S. Van Haren, Dec 03 '09 at 13:56
@Tim, the question you link to asks how to get the user's screen resolution, not an image DPI. — Peter Ajtai, Jun 17 '10 at 16:44

score 0 · Answer 1 · answered Apr 04 '15 at 14:54

You can use the EXIF parsing extension from Blueimp's Load Image library, https://github.com/blueimp/JavaScript-Load-Image#user-content-meta-data-parsing.

loadImage.parseMetaData(file, function(meta) {
    if (!meta.exif) { return; }

    var resX = meta.exif.get('XResolution');
    var resY = meta.exif.get('YResolution');
});

There is also the exif-js library (https://github.com/jseidelin/exif-js), but I cannot vouch for how well it works (haven't used it).

score -5 · Answer 2 · answered Feb 18 '14 at 20:24

I think DPI is not a property of an image. DPI is a measurement used when printing.

Anyhow... You can get width and height of an image with something like this:

var image = new Image();
image.src = "http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png";

//show width and height in alert-popup
alert("Width: "+image.width+", Height: "+image.height);

The img element is always same size as the image itself, if you do not specify width and/or height. That's why this should work :)

I don't know why this got all those downvotes. It works. – John Lord Jul 18 '23 at 01:29 — John Lord, Jul 18 '23 at 01:29

Image Dpi using javascript

2 Answers2