html2canvas保存成大小固定的圖片

html2canvas官網

背景

管理後臺生成二維碼，點擊保存可以下載二維碼圖片，自行打印，打印出來的圖片大小必須是 110mm*160mm

問題

windows 和 MAC OS 系統 保存 出來的圖片 大小 不一樣，打印出來的圖大小也是不一樣的

原因

考慮是 px 和 mm之間的轉換有問題，後進行進一步分析：
1、是不是跟html2canvas文檔中的scale屬性有關：
文檔裏面有關於 scale 的解釋 window.devicePixelRatio 用於渲染的比例。默認爲瀏覽器設備像素比率。
window屬性：devicePixelRatio

該 Window 屬性 devicePixelRatio 能夠返回當前顯示設備的物理像素分辨率與 CSS 像素分辨率的比率。此值也可以解釋爲像素大小的比率：一個 CSS 像素的大小與一個物理像素的大小的比值。簡單地說，這告訴瀏覽器應該使用多少個屏幕的實際像素來繪製單個 CSS 像素。
一個 canvas 在視網膜屏幕上可能顯得太模糊。使用 window.devicePixelRatio 以確定應該添加多少額外的像素密度以允許更清晰的圖像。

由上，發現這個屬性跟mm沒啥關係，它代表的是清晰度，不是生成圖片後的寬高

2、嘗試研究下 px 和 mm 之間的關係
關於 字號、PX像素、PT點數、em、CM釐米、MM毫米之間的換算

px (pixel，像素)是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，如果px要換算成物理長度，需要指定精度DPI(Dots Per Inch，每英寸像素數)，在掃描打印時一般都有DPI可選。
Windows系統默認是96dpi，MAC默認是72dpi。

pt (point，磅) 是一個物理長度單位，指的是72分之一英寸。

pt和px的換算公式可以根據pt的定義得出:
pt=1/72(英寸), px=1/dpi(英寸)
pt\ * 72 = px * dpi ===> pt = px * dpi / 72

1in = 2.54cm = 25.4 mm = 72pt = 6pc
1mm = 2.83 pt = 2.83 * (1px * dpi / 72) = 2.83 * (dpi / 72)
1mm得到了，110mm還會遠麼~

初步認定是dpi導致了圖片保存的不同

3、獲取dpi
Javascript 獲取屏幕DPI

function js_getDPI() {
    var arrDPI = new Array();
    if (window.screen.deviceXDPI != undefined) {
        arrDPI[0] = window.screen.deviceXDPI;
        arrDPI[1] = window.screen.deviceYDPI;
    }
    else {
        var tmpNode = document.createElement("DIV");
        tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
        document.body.appendChild(tmpNode);
        arrDPI[0] = parseInt(tmpNode.offsetWidth);
        arrDPI[1] = parseInt(tmpNode.offsetHeight);
        tmpNode.parentNode.removeChild(tmpNode);    
    }
    return arrDPI;
}