二维码生成器

2021-04-02 16:05:15 阅读：125 来源： 互联网

标签：生成器 getElementById value 二维码 qrcode document

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>

标签：生成器,getElementById,value,二维码,qrcode,document
来源： https://www.cnblogs.com/dken/p/QrcodeGen.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

二维码生成器