QRCode.js 二维码生成工具

作者: 夜鸟丶 | 来源:发表于2018-04-10 17:53 被阅读0次

使用qrcode.js生成二维码
qrcode源码修改，输出企业微信二维码
在vue中使用qrcodeJs
qrcodeJs生成二维码
使用vue-qriously生成二维码
QRCode.js 动态生成二维码
QRCode.js 动态生成二维码
使用JavaScript 生成二维码：QRCode.js
js生成二维码
微信支付---》生成二维码

QRCode.js 是一个用于生成二维码的 js 库，原理是利用canvas绘制图片并插入dom
，用法很简单，如下;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery.min.js"></script>
<script src="js/qrcode.js"></script>
<body>
    <div id="myQRCode"></div>
</body>
<script>
    new QRCode('myQRCode',{
        text: 'http://www.baidu.com',
        width: 300,
        height: 300,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    })
</script>
</html>

上面生成的是一个百度首页的二维码。
简单说明一下上面的参数：
'myQRCode' ：二维码插入的元素id
text：二维码的内容，就是扫描二维码后发送的url
width：二维码的宽
height：二维码的高
colorDark：前景色
colorLight：背景色
correctLevel：容错等级，有QRCode.CorrectLevel.L/M/Q/H 四个级别

打印一个二维码：

function printQRCode() {
        let str = document.getElementById('myQRCode').innerHTML
        let newPage = window.open('打印页面','_blank')
        newPage.document.write(str)
        newPage.document.close()
        newPage.print()
        newPage.close()
    }

批量生成并打印二维码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery.min.js"></script>
<script src="js/qrcode.js"></script>
<body>
    <div id="myQRCode"></div>
    <button onclick="printAllQRCode()">打印全部</button>
</body>
<script>
    let list = []
    let qrcodeArr = []
    function create(obj) {
        document.getElementById('myQRCode').innerHTML = ''
        new QRCode('myQRCode',{
            text: 'http://www.baidu.com' + obj.a,
            width: 300,
            height: 300,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        })
    }
    for(let i = 0; i < 10; i++){
        let obj = {
            a: i
        }
        list.push(obj)
    }
    function loop (i) {
        if (i >= 10) {
            return
        }
        create(list[i])
        setTimeout(function () {
            let str = document.getElementById('myQRCode').innerHTML
            qrcodeArr.push(str)
            i++
            loop(i)
        }, 100)
    }
    function printAllQRCode() {
        let docStr = ''
        let length = qrcodeArr.length
        for (let i = 0; i < length; i++) {
            docStr += qrcodeArr[i]
        }
        let newWindow = window.open('打印窗口', '_blank', 'width=' + (screen.availWidth - 10) + ',height=' + (screen.availHeight - 50) + ',scrollbars,resizable=yes,toolbar=no')
        // 第三个参数需要设置，以保证可以打开一个新窗口而不是新标签页；不然 chrome 下会有bug （具体原因不知道，有大佬知道可以告诉一下）
        newWindow.document.write(docStr)
        newWindow.document.close()
        setTimeout(function () { //二维码在网页绘制需要时间，尤其大批量，不加延迟会导致图片丢失
            newWindow.print()
            newWindow.close()
        }, 100)
    }
    loop(0)
</script>
</html>

在new QRCode() 之后其实是在目标元素内生成了一个<canvas></canvas><img/>的代码块，此时 img 里面并没有 src 属性，貌似需要一定时间生成，所以如果立刻将 innerHTML 放入数组并不能获取到二维码。
因此，在批量生成二维码代码中，使用了递归以及定时器来实现二维码的获取。（我猜也可以创建不同的div去存放，不过工作量有些大，还有不采用for循环是因为定时器会打乱其执行顺序，难控制）