zoukankan      html  css  js  c++  java
  • js实现二维码生成器

    html二维码生成器

    使用QRCode.js库,将文本转换为二维码图片,图片以base64格式返回

    代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>二维码生成器</title>
    
        <!-- QRCode.js:使用 JavaScript 生成二维码 -->
        <!-- Qrcode 库和实例下载: http://static.runoob.com/download/qrcodejs-04f46c6.zip -->
        <!-- Qrcode Github 地址:https://github.com/davidshimjs/qrcodejs -->
        <script type="text/javascript" src="qrcode.min.js"> </script>
    </head>
    
    <body>
        <textarea id='ta' placeholder=" 请输入文字内容"></textarea>
        <button id='btn' class="btn">生成二维码</button>
        <img id="img" width="100" height="100"> </img>
    
        <script type="text/javascript">
            document.getElementById('btn').onclick = function () {
                var value = document.getElementById('ta').value;
                var qrcodeBase64 = value == null ? null : genQrcodeBase64(value);
                document.getElementById("img").src = qrcodeBase64;
            }
            // 获取图片base64
            function genQrcodeBase64(text) {
                this.qrcode = this.qrcode || new QRCode(document.createElement('div'));
                this.qrcode.makeCode(text);
                return this.qrcode._oDrawing._elCanvas.toDataURL("image/png");
            }
        </script>
    
    </body>
    
    </html>
    
  • 相关阅读:
    eclipse中包的位置
    404代码错误解决
    servlet-web.xml配置
    java web.xml配置servlet
    1031整理
    1030整理
    rownum
    存储过程和自定义函数的区别
    课堂整理
    练习
  • 原文地址:https://www.cnblogs.com/dken/p/QrcodeGen.html
Copyright © 2011-2022 走看看