Отношение пикселей к ММ?

Ответ 1

Что я сделал:

 <div id="my_mm" style="height:100mm;display:none"></div>

Затем:

var pxTomm = function(px){   
   return Math.floor(px/($('#my_mm').height()/100)); //JQuery returns sizes in PX
 };

Ответ 2

tl; dr: Если вы не знаете DPI устройства, вы не сможете определить, насколько велик пиксель в реальном мире.

Пиксели сами по себе не являются реальными единицами измерения.

Они могут стать реальным измерением, если принять во внимание значение DPI устройства, которое их отображает.

Формула:

• mm = ( pixels * 25.4 )/DPI

Итак, 8 пикселей просматриваются при настройке экрана 96-DPI:

• ( 8 * 25.4 )/96 = 2.116mm

Все это при условии, что устройство не масштабируется/масштабируется.

Ответ 3

Вам нужно будет узнать DPI устройства и если масштаб масштабируется или нет. Это означало бы, что вам понадобится база данных физических размеров экрана и разрешения экрана для каждого устройства.

Ответ 4

Вы не можете надежно вычислить это, так как невозможно определить размер физического экрана.

Ответ 5

но я наткнулся на это сегодня и должен был заставить его работать.

трюк состоит в том, чтобы создать элемент с размерами в дюймах и запросить его ширину, это даст вам пиксели на дюйм.

 function inch2px(inches) {
                $("body").append("<div id='inch2px' style='width:1in;height:1in;display:hidden;'></div>");
                var pixels = $("#inch2px").width();
                $("#inch2px").remove();

                return inches * pixels;
            }

            function px2inch(px) {
                $("body").append("<div id='inch2px' style='width:1in;height:1in;display:hidden;'></div>");
                var pixels = $("#inch2px").width();
                $("#inch2px").remove();

                return px / pixels;
            }

теперь, если вам нужны миллиметры, просто сделайте px2inch(10)*25.4.

Ответ 6

Нет необходимости в jQuery.

function xToPx(x) {
    var div = document.createElement('div');
    div.style.display = 'block';
    div.style.height = x;
    document.body.appendChild(div);
    var px = parseFloat(window.getComputedStyle(div, null).height);
    div.parentNode.removeChild(div);
    return px;
}


pixels = xToPx('10cm'); // convert 10cm to pixels
pixels = xToPx('10mm'); // convert 10mm to pixels

Обратите внимание, что значения в пикселях зависят от того, какое разрешение сообщает вам браузер устройства. Некоторые браузеры (на некоторых телефонах) лгут об этом и сообщают вам нечто иное, чем фактическое разрешение экрана, в попытке совместимости со старыми сайтами. Главное - никогда не переносить значения преобразования с одного устройства на другое, а всегда использовать вычисления в реальном времени. Даже на рабочем столе пользователь может изменить разрешение экрана.

Чтобы узнать больше о юнитах, ознакомьтесь с этой (короткой) статьей на W3:

https://www.w3.org/Style/Examples/007/units.en.html

Ответ 7

Основываясь на ответе @Dawa выше, это мое решение:

var mmToPx = function(mm) {
    var div = document.createElement('div');
    div.style.display = 'block';
    div.style.height = '100mm';
    document.body.appendChild(div);
    var convert = div.offsetHeight * mm / 100;
    div.parentNode.removeChild(div);
    return convert;
};

Просто отметьте, что высота 100 мм даст вам лучший прецизионный коэффициент. Расчет будет мгновенным, и div не будет виден. Нет необходимости в jQuery

Ответ 8

я использую эту простую функцию

function pix2mm(val,dpi){
    return (val/0.0393701)/dpi;
}

тестовые выходы 300 600 900 DPI

var r = pix2mm(100,300);  // converting 100 pixels it 300 DPI 
console.log(r);  // output : 8.4 mm
var r1 = pix2mm(100,600);  // converting 100 pixels it 600 DPI
console.log(r1);  // output : 4.2 mm
var r2 = pix2mm(100,900);  // converting 100 pixels it 900 DPI
console.log(r2);  // output : 2.8 mm

ДЕМО: https://jsfiddle.net/xpvt214o/29044/