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

需求: 

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

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

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

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

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

代码:

1.  
   export function generatorQrcode(teId, teNo, teName, qrCodeUrl, qrcodeDom = null,) {
2.  
   let qrcodeContent = qrcodeDom || document.createElement("div");
3.  
   qrcodeContent.width = '400px'
4.  
   qrcodeContent.height = '400px'
5.  
   let qrcodeCanvas = new QRCode(qrcodeContent, {
6.  
   text: qrCodeUrl "maintain-equipment-detail/" teId, // 需要转换为二维码的内容
7.  
   width: 400,
8.  
   height: 400,
9.  
   colorDark: "#000000",
10.  
    colorLight: "#ffffff",
11.  
    correctLevel: QRCode.CorrectLevel.H,
12.  
    });
13.  
    var resolutionMultiple = 1; // 分辨率倍数
14.  
    var borderSize = 5 * resolutionMultiple; // 边框留白
15.  
    var canvasWidth = 500 * resolutionMultiple; // 图片宽度
16.  
    let separator = teNo && teName ? '-' : ''
17.  
    // 判断 参数为空的命名情况
18.  
    var text = (((teNo ?? '') separator (teName ?? '')) || '-'); // 底部文字
19.  
    var fontSize = 32 * resolutionMultiple; // 文字大小
20.  
     
21.  
    var canvasHeight = canvasWidth fontSize;
22.  
    var canvas = document.createElement("canvas");
23.  
    if (!canvas.getContext) return;
24.  
    canvas.width = canvasWidth;
25.  
    canvas.height = canvasHeight;
26.  
     
27.  
    var ctx = canvas.getContext("2d");
28.  
    ctx.fillStyle = "rgb(255,255,255)"; // 调色(纯白)
29.  
    ctx.fillRect(0, 0, canvasWidth, canvasHeight); // 绘制背景
30.  
     
31.  
    var qrcodeSize = canvasWidth - borderSize * 2;
32.  
    ctx.drawImage(
33.  
    qrcodeContent.querySelector("canvas"),
34.  
    borderSize,
35.  
    borderSize,
36.  
    qrcodeSize,
37.  
    qrcodeSize
38.  
    ); // 填充二维码
39.  
     
40.  
    ctx.fill(); // 填充背景
41.  
     
42.  
    ctx.fillStyle = "rgb(0,0,0)"; // 调色(纯黑)
43.  
    ctx.font = fontSize "px Arial"; // 文本大小, 字体
44.  
    ctx.textAlign = "center";
45.  
    ctx.fillText(
46.  
    text,
47.  
    canvasWidth / 2,
48.  
    qrcodeSize borderSize fontSize,
49.  
    qrcodeSize
50.  
    ); // 绘制文本
51.  
    // 清除原二维码
52.  
    qrcodeCanvas.clear()
53.  
    qrcodeContent.appendChild(canvas);
54.  
    return qrcodeContent
55.  
    }

这篇好文章是转载于：学新通技术网