如何将像素转换为英寸？

Question

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

请指教

JS：

//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");

Answer 1

我不知道是否有一种简单的方法可以做到这一点，但是您可以使用下面的函数来获取您想要的任何单位的计算样式（用法是window.getUnits(el, 'width')，它将返回一个您可以使用它的.inch 属性）：

(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;

})();

来自：http://upshots.org/javascript/javascript-get-current-style-as-any-unit

Answer 2

要获得每英寸的实际像素，您需要知道您正在显示的显示器的尺寸。 如果您的分辨率为 1920 x...，而您的可见宽度为 20 英寸，则结果将是每英寸 96 像素。