How to find the density (PPI) of the image?

Asked

Viewed 519 times

1

I’ve seen a lot of people with the same doubt, but I can’t find anything solved.

If you open an image in GIMP and/or Photoshop and click on Resize Image it is possible to discover the resolution of the image and I want to do this, ie I want to discover the resolution of the image with javascript or jquery or javascript or any other language that does this.

It is worth mentioning that if it is possible to discover the size of the image in cm, in, mm, m or any unit of measure that is not digital (px) already solves my problem, because I can do the calculation

I already managed to get some data with Javascript, Jquery and PHP. Follow the code:

<!DOCTYPE html>
<html>
<head>
	<title>Image</title>
	<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>

	<script type="text/javascript" charset="utf-8" async defer>
		$(document).ready(function()
		{
			// PPI do dispositivo de reprodução (Seu monitor)
	    var elem = document.createElement('div');
	    elem.style.width = '1in';
	    document.body.appendChild(elem);
	    var ppiScreen = elem.offsetWidth;
	    document.body.removeChild(elem);

	    $('#result').append('<p>PPI Screen: '+ppiScreen+' PPI</p>');

			// Javascript
	    var img = document.getElementById('img');

			var width = img.width;
	    var height = img.height;
	    diagonal = Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
	    $('#result').append('<p>JavaScript: width: '+width+'px; height: '+height+'px; diagonal: '+diagonal.toFixed(3)+'.</p>');

			width = img.clientWidth;
	    height = img.clientHeight;
	    diagonal = Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
	    $('#result').append('<p>JavaScript: clientWidth: '+width+'px; clientHeight: '+height+'px; diagonal: '+diagonal.toFixed(3)+'.</p>');

			width = img.naturalWidth;
	    height = img.naturalHeight;
	    diagonal = Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
	    $('#result').append('<p>JavaScript: naturalWidth: '+width+'px; naturalHeight: '+height+'px; diagonal: '+diagonal.toFixed(3)+'.</p>');

			width = img.offsetWidth;
	    height = img.offsetHeight;
	    diagonal = Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
	    $('#result').append('<p>JavaScript: offsetWidth: '+width+'px; offsetHeight: '+height+'px; diagonal: '+diagonal.toFixed(3)+'.</p>');

			width = img.scrollWidth;
	    height = img.scrollHeight;
	    diagonal = Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
	    $('#result').append('<p>JavaScript: scrollWidth: '+width+'px; scrollHeight: '+height+'px; diagonal: '+diagonal.toFixed(3)+'.</p>');

	    // JQuery
			img = $('#img');

			width = img.width();
	    height = img.height();
	    diagonal = Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
	    $('#result').append('<p>jQuery: width(): '+width+'px; height(): '+height+'px; diagonal: '+diagonal.toFixed(3)+'.</p>');

			width = img.innerWidth();
	    height = img.innerHeight();
	    diagonal = Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
	    $('#result').append('<p>jQuery: innerWidth(): '+width+'px; innerHeight(): '+height+'px; diagonal: '+diagonal.toFixed(3)+'.</p>');

			width = img.outerWidth();
	    height = img.outerHeight();
	    diagonal = Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
	    $('#result').append('<p>jQuery: outerWidth(): '+width+'px; outerHeight(): '+height+'px; diagonal: '+diagonal.toFixed(3)+'.</p>');

		});

	</script>
</head>
<body>
	<body>
		<div id='result'></div>

		<?php
			// PHP
	  	list($width, $height, $type, $attr) = getimagesize("https://orig00.deviantart.net/f4bf/f/2008/294/f/6/female1_stock_300dpi_47x31cmm_by_sorcererstock.jpg");
			var_dump($width, $height, $type, $attr);
	  ?>

	  <img id="img" src="https://orig00.deviantart.net/f4bf/f/2008/294/f/6/female1_stock_300dpi_47x31cmm_by_sorcererstock.jpg" style='width:20%;height:20%;'>
	  <p>Width: 47,794; Height: 31,801; DPI: 300.</p>

	</body>
</body>
</html>

Eaw? Can you help me?


I can get PPI from some images with the following code:

$filename = "https://orig00.deviantart.net/f4bf/f/2008/294/f/6/female1_stock_300dpi_47x31cmm_by_sorcererstock.jpg";
$image = new Imagick($filename);
$geo=$image->getImageResolution();
echo $geo['x'].'<br>';
echo $geo['y'];

According to the introduction of Imagemagick would suffice to use with Variety of formats (over 100) including DPX, EXR, GIF, JPEG, JPEG-2000, PDF, Photocd, PNG, Postscript, SVG, and TIFF.


Another way that sometimes works is to take the PPI by hexadecimal:

$a = fopen($filename,'r');
$string = fread($a,20);
var_dump(bin2hex($string));
$data = bin2hex(substr($string,14,4));
echo '<pre>'; print_r($data); echo '</pre>';

With this image for example http://edumuch.com/wp-content/uploads/2015/12/Leverage-Your-Linux-Skills.png the result will not work in either of the above two settings.


I really just need to know the image’s PPI and I need something that works every time.

  • Image doesn’t always have PPI in the metadata. You should not confuse the resolution of the screen (whose actual size is usually only achieved with EDID) with the author’s original intention. For example, TIFF has PPI in metadata, PNG may have and may not have, JPG does not have native PPI. You’d better explain what you want to get with the code (the real problem) instead of the way you’re looking for the solution..

  • Related subject: http://answall.com/questions/11048/70 - note that if you want a print size, you can simply use physical measurements in the CSS instead of pixels.

  • I want to get the image resolution in PPI! And it’s not for printing.

  • 1

    If it is not for physical medium, really PPI does not have much practical use. PPI does not change anything in the display on the screen. A 1000px image can have 10PPI or 100000PPI giving in it in digital medium. Probably if you tell us what you want to do with the information, maybe the community can help better (or at least understand what the specific problem is).

  • For example: the image of your code link only has 305PPI when it is used with exactly 47x31cm. If the print size decreases, the Ppis go up, and vice versa. The calculation is simple: 5645 / 47 * 2.54

  • How did you get the measurements 47 cm x 31 cm?

  • 5645 pixels / 305 ppi = 18.50... inches. 18.50... inches * 2.54 = 47 cm (note that I rounded up the 18.50 to post here just for convenience) - Basically you divide the pixels by the desired Ppis to get the output size. Or divide by the desired output, and get the Ppis for that output.

  • Nice your account, but you are using the PPI and according to the problem I described is exactly this variable I do not have.

  • Well, perhaps by reading a little bit you understand that this "variable" is exactly what I mentioned. It usually doesn’t exist anywhere. When it exists, it is a "suggestion" from the author of the image (as in a TIFF or PNG), not a real measurement. So much so that this concept is not usually part of JPG images, which only store the measure in pixels (which is the only real measure of a rasterized digital image). Basically you can choose how many PPI you want, and the result is the output size. Or simply choose output size, and PPI is the result of the account.

  • Now, if you want the suggested Ppis measurement of the formats that support this information, you need to see it case by case. PNG stores Ppis one way (and is optional). TIFF stores it another way. JPG does not store it. Each format uses a different "encoding".

Show 5 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.