问题开始
今天工作上遇到了一个问题,用户需要在网页上的A4纸上盖章,且章子必须尺寸与纸张尺寸需要一致。用户自己是可以设置印章尺寸的,但是我将印章的尺寸需要转化成px来定位,那么问题来了,如何将毫米mm转为像素呢?我在网上找了一堆代码,并没啥实用价值,一些参数都是固定设备尺寸的约值,很多博客都是一大堆原理,一堆计算,且显示器的尺寸和分辨率五花八门,我们怎么才能算的准?我看了十几篇博客,都是在讲dpi,没一个能快速实现我想要的效果。
下面上代码,我们把转换值的过程交给浏览器完成,我们不需要去知道设备的尺寸和比例,岂不美哉?
代码
// 获取每毫米的像素值
function getOneMmsPx (){
// 创建一个1mm宽的元素插入到页面,然后坐等出结果
let div = document.createElement("div");
div.id = "mm";
div.style.width = "1mm";
document.querySelector("body").appendChild(div);
// 原生方法获取浏览器对元素的计算值
let mm1 = document.getElementById("mm").getBoundingClientRect();
console.log(mm1);
return mm1.width;
}
图片
结语
假如你想获取别的单位和像素的换算,就用别的单位代替1mm就是的,将换算的过程交给浏览器去实现,这是一种解决思路,或许有别的方法,但是我相信这个是最便捷且最容易理解的。