How to calculate the size of the picture mm or cm

how to calculate the size of a picture mm or cm

Mar.28,2021

I don't think this is a bad question. Why do so many people step on it? Don't step on others in a hurry, if you can do the math, why don't you come out and show me two steps?

dpi concept

first of all, we need to clarify two concepts: dpi and ppi . dpi is the abbreviation of dot per inch , and ppi is the abbreviation of pixel per inch , which means " pixels per inch ". On the monitor, dpi equals ppi , so let's all take dpi as an example.

what about the dpi of our monitor? First of all, you can check your current resolution through the settings of the monitor. For example, the display I am using now has a resolution of 2560x1440 . According to Pythagorean Theorem (it can also be called Pythagorean Theorem , Patriots call it Pythagorean Theorem, although in fact Pythagorean Theorem has never been a theorem. Pythagoras really proved this theorem.), we can calculate that the diagonal is the square of 2560 plus the square of 1440 and then open the root sign to get 2937.20956 . So because this display is about 27 inches, we can use 2937.20956 divided by 27 inches to get 108.7855 .

calculate the number of centimeters of the picture

Suppose you have a jpg picture or png picture whose width is 1088 pixels. Divide this value by dpi above, and you get 10 inches. Next, we convert inches into centimeters, because one inch equals 2.54 centimeters, so the width of this picture is 25.25. The calculation of height is similar.

solve

with js

next, the big brother asked how to use Javascript to get this size.

well, first we must know how to use Javascript to get dpi . We can do this: let's first create a virtual div , set its width and height to 1in , that is, 1 inch, notice that it is 1in instead of 1px Oh, don't get me wrong. For example:

<div id="dpi" style="height: 1in; width: 1in; position: absolute; left: -100%; top: -100%;"></div>

then we use js to calculate its pixel width to get the dpi :

of this display.
function getDPI() {
  return document.getElementById("dpi").offsetHeight;
}

got dpi , smart as you can guess how to calculate the size of the picture, right?

Menu