码迷,mamicode.com
首页 > 其他好文 > 详细

二维码生成器

时间:2021-04-05 11:53:18      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:==   ejs   二维码生成   body   ret   make   set   drawing   meta   

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>

二维码生成器

标签:==   ejs   二维码生成   body   ret   make   set   drawing   meta   

原文地址:https://www.cnblogs.com/dken/p/QrcodeGen.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!