使用js换算mm,cm,px

问题开始

今天工作上遇到了一个问题,用户需要在网页上的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;
	} 

图片
使用js换算mm,cm,px_第1张图片

结语

假如你想获取别的单位和像素的换算,就用别的单位代替1mm就是的,将换算的过程交给浏览器去实现,这是一种解决思路,或许有别的方法,但是我相信这个是最便捷且最容易理解的。

你可能感兴趣的:(js插件,css)