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>
    
  • 相关阅读:
    GC原理知多少
    C# 编译运行原理
    NetCore无需添加web/wcf引用来调用webservice
    WPF基础知识-资源概述
    WPF基础知识-XAML概述
    WPF入门-使用C#创建简单应用
    WPF概述
    Entity Framework Core
    Entity Framework Core
    Entity Framework Core
  • 原文地址:https://www.cnblogs.com/dken/p/QrcodeGen.html
Copyright © 2011-2022 走看看