首页 > 技术文章 > QRCode.js生成二维码

frank-link 2019-02-14 17:13 原文

QRCode的GitHub地址:

  https://github.com/KeeeX/qrcodejs

  该版本解决了主版本(https://github.com/davidshimjs/qrcodejs)中出现的长度溢出的问题;

示例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript 二维码生成库:QRCode</title>
    <style>
        body{
            text-align: center;
        }
        input[name='content']{
            width: 200px;
            margin-top: 10px;
        }
        div#qrcode{
            width: 100px;
            height: 100px;
            border: 1px dashed #aaa;
            margin: 0 auto;
            margin-top: 15px;
        }
        textarea{
            width: 198px;
            height: 120px;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <input name="content" id="oneline_text" value="mail: 812852259@qq.com" />
    <textarea id="multiline_text">姓名:123456
邮箱:123456789@qq.com</textarea>
    <div id="qrcode"></div>
    <script type="text/javascript" src="你自己的路径\qrcode.min.js"></script>
    <script>
        const input = document.getElementById("oneline_text");
        const textarea = document.getElementById("multiline_text");
        const qrcode = new QRCode(document.getElementById("qrcode"), {
            width: 100,
            height: 100,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.L
        });

        function makeCode(value) {
            if (!value) {
                alert("Input a text !!!");
                return;
            }

            qrcode.makeCode(value);
        }
        input.addEventListener("blur", function(){
            makeCode(this.innerText || this.value);
        });
        input.addEventListener("keydown", function(e){
            if (e.keyCode === 13) {
                makeCode(this.innerText || this.value);
            }
        });
        textarea.addEventListener("blur", function(){
            makeCode(this.innerText || this.value);
        });
    </script>
</body>

</html>

qrcode实现二维码单行展示使用input,

qrcode实现二维码多行展示使用textarea

 

qrcode的配置参考:

QRCode.js 生成二维码

js生成二维码——QRCode.js中文文档

推荐阅读