QRCode.js 生成二维码

敲代码的哞哞儿
1,041 阅读3分钟

QRcode.js生成二维码

写在前面,此文章意在记录工作中的总结,为他人提供一点点的帮助,对文章的内容欢迎大家提出意见

实现背景

在生成报告的同时给报告展示一个二维码进入商品界面

实现步骤

  1. 导入qrCode.js的js文件

    • 本地引入js,下载js文件,采用的方式引入

    • 远程引入js,这里不赘述,提供一个字节跳动的示例引入

      <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>

    • Vue引入js

      npm i qrcodejs2

2.创建二维码渲染的位置

var qrcode = new QRCode(document.getElementById("qrCode"), { 
				width: 80,    //二维码的宽
				height: 80,   //二维码的高
				colorDark : "#000000",  //二维码黑色的地方
				colorLight : "#ffffff",  //二维码白色的地方
				correctLevel : QRCode.CorrectLevel.L, //二维码的校错等级,L为最低级
			});

当然你也可以这样,高手需要更多参数!

var qrcode = new QRCode(document.getElementById("qrCode"), {
    render     : 'canvas',   //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
    minVersion : 40,         
    maxVersion : 40,         //min和maxVersion都是对内容的限制,值越大,容纳的数据越多
    ecLevel    : 'L',        //识别度  'L', 'M', 'Q' or 'H'
    left       : 0,
    top        : 0,
    size       : 256,        //尺寸
    fill       : '#000',     //二维码颜色
    background : null,       //背景色
    radius     : 0.0,        // 0.0 .. 0.5
    quiet      : 0,          //边距
    mode       : 4,
    mSize      : 0.3,        //图片大小
    mPosX      : 0.5,
    mPosY      : 0.5,
});

3.创建链接数据源,通过创建的js对象调用内部的方法来生成二维码

//此处应该注意,在业务场景下,需要对url链接先发送请求判断链接能否访问正确
JQ.ajax({
    url:_ctxPath+"/androidShop.do",
    type:"post",
    data:{"数据源"},
    dataType:"json",
    cache:false,
    statusCode: {
        200: function (json) {
            try {
                qrcode.makeCode(qrurl)  //此处为生成验证码的方法,参数为访问地址
            } catch (err) {
                console.log(err);
                alert("生成二维码失败，请刷新页面重试");
            }
        }
    }
})

需要注意的问题

  • 需要注意二维码内部包含的地址不应该过长,否则就会导致生成的二维码太过密集
    • 记录一种思路,通过redis把报告数据生成为一个key值存到redis或者UUID存入数据库,缩短url长度
  • 在生成二维码的时候一定要先进行访问,判断地址是否访问畅通,保证用户体验
  • 在二维码扫描访问时跳回原来页面会报QRCode的undefined问题,可以将QRCode变量在新页面中进行重新赋值为null
  • 如果显示"code length overflow"的错误 
    •   Uncaught Error: code length overflow. (1604>1056)
    • 因为二维码包含的url长度过长,解决办法是修改url长度,此错误在url中包含中文的情况下更常见,因为地址中的url中文常被转码,地址url更长
  • 如果出现二维码包含的url长度过长,还会出现的问题是二维码生成的图片变模糊,解决方法如下:

    • 在生成二维码的参数中设置为canvas绘画,详见本文的高手参数

    • 将二维码的大小样式都设置为百分百,用父容器来缩小图片,总体逻辑就是先放大再缩小,下面是代码:

    •     //qrCode的id选择器,就是生成二维码的div标签的id
    #qrCode img{
    width : 90px;
    height: 90px;
    } //此为父容器,即二维码的img
    #qrCode canvas{
    width : 100%;
    height: 100%;
    } //此为内部图片的大小

总结

  • ​ qrCode的js库提供了很便捷的生成二维码方式,但是仍然需要注意跳转地址的安全性,选择合适的加密方式加密
  • 下班快乐! 双休大吉!
avatar
文章
阅读
粉丝