Vue使用qrcodejs2生成底部有文字标题的二维码

需求: 

生成底部带文字的二维码 扫描跳转移动端项目地址

简单封装了一个函数 参数可以自己修改

qrcodeDom为二维码生成容器 传入dom即可 如果不传会自己创建dom 并返回

new QRCode 传入的text为二维码内容 即扫描后转化结果

外部var的 text 为底部填充文字，可根据需求自己更改

代码:

export function generatorQrcode(teId, teNo, teName, qrCodeUrl, qrcodeDom = null,) {
    let qrcodeContent = qrcodeDom || document.createElement("div");
    qrcodeContent.width = '400px'
    qrcodeContent.height = '400px'
    let qrcodeCanvas = new QRCode(qrcodeContent, {
        text: qrCodeUrl + "maintain-equipment-detail/" + teId, // 需要转换为二维码的内容
        width: 400,
        height: 400,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
    });
    var resolutionMultiple = 1; // 分辨率倍数
    var borderSize = 5 * resolutionMultiple; // 边框留白
    var canvasWidth = 500 * resolutionMultiple; // 图片宽度
    let separator = teNo && teName ? '-' : ''
    // 判断 参数为空的命名情况
    var text = (((teNo ?? '') + separator + (teName ?? '')) || '-'); // 底部文字
    var fontSize = 32 * resolutionMultiple; // 文字大小

    var canvasHeight = canvasWidth + fontSize;
    var canvas = document.createElement("canvas");
    if (!canvas.getContext) return;
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(255,255,255)"; // 调色(纯白)
    ctx.fillRect(0, 0, canvasWidth, canvasHeight); // 绘制背景

    var qrcodeSize = canvasWidth - borderSize * 2;
    ctx.drawImage(
        qrcodeContent.querySelector("canvas"),
        borderSize,
        borderSize,
        qrcodeSize,
        qrcodeSize
    ); // 填充二维码

    ctx.fill(); // 填充背景

    ctx.fillStyle = "rgb(0,0,0)"; // 调色(纯黑)
    ctx.font = fontSize + "px Arial"; // 文本大小, 字体
    ctx.textAlign = "center";
    ctx.fillText(
        text,
        canvasWidth / 2,
        qrcodeSize + borderSize + fontSize,
        qrcodeSize
    ); // 绘制文本
    // 清除原二维码
    qrcodeCanvas.clear()
    qrcodeContent.appendChild(canvas);
    return qrcodeContent
}