前言
在移动端使用qrcodejs2生成二维码的时候发现安卓效果有所偏差,而ios/模拟器/chrome是正常的
后来发现显示的两个DOM是不一样的,安卓的是canvas,而其它则是img
在研究发现是我生成的二维码尺寸不对。rem下canvas参数大小有问题,而img则是正常的
canvas移动端rem适配绘制内容需要解决px转换问题
// 处理不能自动转换的PX为适配后的px
const dealPx = px => {
const fontSize = Number(getComputedStyle(window.document.documentElement)['font-size'].replace('px', ''))
return Math.round((px * fontSize) / 100); // 具体转换比例因项目而异
}
function qrcode() {
new QRCode('shareQrcode', {
width: dealPx(130),
height: dealPx(130),
text: ldyAddr,
correctLevel: QRCode.CorrectLevel.L
});
}
所以要根据项目rem比例进行canvas参数转换
所有移动端适配下canvas绘制都需要转换单位
同样的,所有使用适配方案的项目中,使用canvas绘制都需要进行单位转换