qrcodejs2移动端生成二维码在安卓大小不一致

319 阅读1分钟

前言

在移动端使用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绘制都需要进行单位转换