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