get image width and height then in cm by JS

Question

how can I get an image's width and height in cm by JavaScript? I wrote a simple script, but when images have different resolutions so it couldn't show correct w and h. Please help me. (sorry for my English)

How about adding your code example so that people can suggest improvements ? — the-noob, Apr 30 '16 at 09:49
In short: you can’t get the real dimension because images are built in pixels and different devices have a different pixel per inch ratio. — KittMedia, Apr 30 '16 at 22:45

score 0 · Answer 1 · edited Apr 30 '16 at 22:49

0

$('img').width();
$('img').height();

or

$('img').clientWidth;
$('img').clientHeight;

edited Apr 30 '16 at 22:49

hichris123

10,145
15
56
70

answered Apr 30 '16 at 09:51

jamal zareie

19
1
5

I want width and height in cm! – Mhe Mrg Apr 30 '16 at 10:14

Ali Mamedov · Answer 2 · 2016-04-30T10:44:23.143

Small sample on pure JavaScript with pixel to cm converter (size depends on screen's DPI):

var
  getSizeInCM,
  ready;

/* Convert px to cm */
getSizeInCM = function(sizeInPX) {
  
   return sizeInPX * 2.54 / (96 * window.devicePixelRatio)
};

ready = function() {
  
  var 
    img = document.getElementById('img'),
    width = getSizeInCM(img.clientWidth),
    height = getSizeInCM(img.clientHeight);

  alert('width: ' + width.toFixed(2) + ' cm, height: ' + height.toFixed(2) + ' cm');
};

<body onload="ready()">
  <img id="img" src="http://placehold.it/250x150">
</body>

Result (MacBook Pro late 2011, Google Chrome):

Result (Apple Iphone 6, Safari):

I want width and height in cm! – Mhe Mrg Apr 30 '16 at 10:14 — Mhe Mrg, Apr 30 '16 at 10:14

score 0 · Answer 3 · answered Apr 30 '16 at 10:14

If it is sufficient to assume 96 pixels per inch, the formula is to calculate cm is:

centimeters = pixels * 2.54 / 96

function getImgSize() {
  var img = document.getElementById('img');
  var width = img.clientWidth * 2.54 / 96;
  var height = img.clientHeight * 2.54 / 96;
  document.getElementById('demo').innerHTML = 'width: ' + width + ', height: ' + height;
};

<body onload="getImgSize()">
  <img id="img" src="http://placehold.it/250x150">
  <p id="demo"></p>
</body>

Thanks a lot! but my program is dynamic and users have many images in different dpi! — Mhe Mrg, Apr 30 '16 at 10:21

score 0 · Answer 4 · edited May 23 '17 at 12:07

Some experiments with HTML5, to see which values actually get returned.

First of all I used a program called Dash to get an overview of the image API. It states that 'height' and 'width' are the rendered height/width of the image and that 'naturalHeight' and 'naturalWidth' are the intrinsic height/width of the image (and are HTML5 only).

I used an image of a beautiful butterfly, from a file with height 300 and width 400. And this Javascript:

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

Then I used this HTML, with inline CSS for the height and width.

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

Results:

/*Image Element*/ height == 300         width == 400
       naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

I then changed the HTML to the following:

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

i.e. using height and width attributes rather than inline styles

Results:

/*Image Element*/ height ==  90         width == 115
       naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

I then changed the HTML to the following:

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
i.e. using both attributes and CSS, to see which takes precedence.

Results:

/*Image Element*/ height ==  90         width == 115
       naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

NOTE : I have copied this answer from Height and Width. Its really worth to know these differences.

Hope this helps you.

get image width and height then in cm by JS

4 Answers4