JS生成二维码

演示： https://lanleilin.github.io/lanTools/generateQRcode/qrCode.html
代码地址： https://github.com/lanleilin/lanTools/tree/master/generateQRcode
方法，在html中引入qrCode.js即可：
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="./js/qrCode.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background: lightgray;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="container">
            <div id="qrcode">
            </div>
            <input type="text" id="getValue" placeholder="请输入" /> <button id="send">生成验证码</button>
            <div>
                <input type="number" id="getWidth" placeholder="大小(默认120)" />

            </div>
        </div>
    </div>

    <script>
        window.onload = function() {

            function generate(num) {
                this.w = num;
                var that = this;
                this.qrcode = new QRCode(document.getElementById("qrcode"), {
                     that.w, //设置宽高
                    height: that.w
                });
                this.url = document.getElementById("getValue").value ? document.getElementById("getValue").value : "say hello";
                this.qrcode.makeCode(this.url);
            }

            function foo() {
                this.getWidth = document.getElementById('getWidth').value.slice(0, 3);
                this.w = parseInt(this.getWidth) ? parseInt(this.getWidth) : 120;
                new generate(this.w);
                let _this = this;
                document.getElementById("send").addEventListener('click', function() {
                    document.getElementById('qrcode').innerHTML = '';
                    _this.getWidth = document.getElementById('getWidth').value.slice(0, 3);
                    _this.w = parseInt(_this.getWidth) ? parseInt(_this.getWidth) : 120;
                    new generate(_this.w);
                })
            }
            new foo();


        }
    </script>
</body>

</html>