Javascript 如何将像素转换为英寸？

我需要以英寸为单位显示“宽度”。我目前正在尝试读取用户的输入文本并测量其宽度

请告知

JS:

---

我不知道是否有一种简单的方法可以做到这一点，但是您可以使用下面的函数来获得您想要的任何单位的计算样式（用法是

window.getUnits（el，'width'）

，它将返回一个对象，您可以使用它的

.inch

属性）：

---

我不知道是否有一种简单的方法可以做到这一点，但是你可以使用下面的函数来获得你想要的任何单位的计算样式（用法是

window.getUnits（el，'width'）

，它将返回一个对象，你可以使用它的

.inch

属性）：

---

获取信息来源：

要获取每英寸的实际像素，您需要知道正在显示的显示器的大小。

---

如果你的分辨率是1920 x。。。你的可视宽度是20英寸，结果是每英寸96像素。

要获得每英寸的真实像素，你需要知道你正在显示的显示器的大小。

---

如果你的分辨率是1920 x。。。你的可见宽度是20英寸，结果是每英寸96px。

这无助于用JavaScript动态计算值。为什么不呢？您只需要捕获屏幕大小并计算结果，更改分辨率值。这无助于使用JavaScript动态计算值。为什么不呢？您只需要捕获屏幕的大小，并通过更改分辨率值来计算结果。。

//change text width based on text input
    $('#text').on('change', function() {            
    function getTextWidth(text, font) {
        var canvas = getTextWidth.canvas || 
            (getTextWidth.canvas = document.createElement("canvas"));
        var context = canvas.getContext("2d");
        context.font = font;
        var metrics = context.measureText(text);
        return metrics.width;
    };

    //display text width to html
    $(".textWidth")
    .text("Width: " +
        getTextWidth(
                 $("#prev").text()) + " px");

(function(){

    // pass to string.replace for camel to hyphen
    var hyphenate = function(a, b, c){
        return b + "-" + c.toLowerCase();
    }

    // get computed style property
    var getStyle = function(target, prop){
        if(window.getComputedStyle){ // gecko and webkit
            prop = prop.replace(/([a-z])([A-Z])/, hyphenate);  // requires hyphenated, not camel
            return window.getComputedStyle(target, null).getPropertyValue(prop);
        }
        if(target.currentStyle){
            return target.currentStyle[prop];
        }
        return target.style[prop];
    }

    // get object with units
    var getUnits = function(target, prop){

        var baseline = 100;  // any number serves 
        var item;  // generic iterator

        var map = {  // list of all units and their identifying string
            pixel : "px",
            percent : "%",
            inch: "in",
            cm : "cm",
            mm : "mm",
            point : "pt",
            pica : "pc",
            em : "em",
            ex : "ex"
        };

        var factors = {};  // holds ratios
        var units = {};  // holds calculated values

        var value = getStyle(target, prop);  // get the computed style value

        var numeric = value.match(/\d+/);  // get the numeric component
        if(numeric === null) {  // if match returns null, throw error...  use === so 0 values are accepted
            throw "Invalid property value returned";
        }
        numeric = numeric[0];  // get the string

        var unit = value.match(/\D+$/);  // get the existing unit
        unit = (unit == null) ? map.pixel : unit[0]; // if its not set, assume px - otherwise grab string

        var activeMap;  // a reference to the map key for the existing unit
        for(item in map){
            if(map[item] == unit){
                activeMap = item;
                break;
            }
        }
        if(!activeMap) { // if existing unit isn't in the map, throw an error
            throw "Unit not found in map";
        }

        var temp = document.createElement("div");  // create temporary element
        temp.style.overflow = "hidden";  // in case baseline is set too low
        temp.style.visibility = "hidden";  // no need to show it

        target.parentElement.appendChild(temp); // insert it into the parent for em and ex  

        for(item in map){  // set the style for each unit, then calculate it's relative value against the baseline
            temp.style.width = baseline + map[item];
            factors[item] = baseline / temp.offsetWidth;
        }

        for(item in map){  // use the ratios figured in the above loop to determine converted values
            units[item] = numeric * (factors[item] * factors[activeMap]);
        }

        target.parentElement.removeChild(temp);  // clean up

        return units;  // returns the object with converted unit values...

    }

    // expose           
    window.getUnits = this.getUnits = getUnits;

})();