背景
管理后台生成二维码,点击保存可以下载二维码图片,自行打印,打印出来的图片大小必须是 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;
}