qrcode.js 生成二维码

最新推荐文章于 2024-06-21 21:10:05 发布

珍妮的小罐君

最新推荐文章于 2024-06-21 21:10:05 发布

阅读量5k

点赞数

分类专栏： HTML 文章标签： qrcode 二维码如何生成二维码

本文链接：https://blog.csdn.net/qq_36671474/article/details/81202194

版权

HTML 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

什么是qrcode.js?

qrcode.js是一个用于生成二维码的js库，主要是通过DOM元素，再通过H5中的canvas绘制而成，它不依赖任何库。

下载地址：http://code.ciaoca.com/javascript/qrcode/

^-^先看实例^-^

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/qrcode.js"></script>
</head>
<body>
    <input id="text" type="text" value="http://baidu.com" />
    <br/><br/>

    <div id="qrcode"></div>

    <script>
        var elText = $("#text").val();
        var qrcode = new QRCode("qrcode", {
            text: elText,
            width: 128,
            height: 128,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });
        function makeCode () {
            if (!elText) {
                elText.focus();
                return;
            }
            qrcode.makeCode(elText);
        }

        makeCode();

        $("#text").on("blur", function () {
            makeCode();
        }).on("keydown", function (e) {
            if (e.keyCode == 13) {
                makeCode();
            }
        });
    </script>
</body>
</html>

^-^使用方法^-^

【1】引用qrcode.js，创建要生成二维码的元素

<script src="js/qrcode.js"></script>

<div id="qrcode"></div>

【2】调用----初始化生成的二维码，此处可以设置生成二维码的宽高，颜色，背景等属性

方法1：

new QRCode(document.getElementById('qrcode'), 'your content');

方法2：

new QRCode("qrcode", {
    text: elText,
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff", 
    correctLevel : QRCode.CorrectLevel.H
})

【3】使用 API ，生成二维码

qrcode.clear(); 

qrcode.makeCode();

^-^参数说明^-^

new QRCode(element, option)

名称	默认值	说明
element	-	显示二维码的元素或该元素的 ID
option		参数配置

^-^option参数说明^-^

名称	默认值	说明
width	256	图像宽度
height	256	图像高度
typeNumber	4
colorDark	"#000000"	前景色
colorLight	"#ffffff"	背景色
correctLevel	QRCode.CorrectLevel.L	容错级别，可设置为： QRCode.CorrectLevel.L（最大 7% 的错误能够被纠正） QRCode.CorrectLevel.M（最大 15% 的错误能够被纠正） QRCode.CorrectLevel.Q（最大 25% 的错误能够被纠正） QRCode.CorrectLevel.H（最大 30% 的错误能够被纠正）

^-^方法：^-^

名称	说明
makeCode(text)	设置二维码内容
clear()	清除二维码。（仅在不支持 Canvas 的浏览器下有效）

珍妮的小罐君

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
qrcode.js 生成二维码

什么是qrcode.js?qrcode.js是一个用于生成二维码的js库，主要是通过DOM元素，再通过H5中的canvas绘制而成，它不依赖任何库。下载地址：http://code.ciaoca.com/javascript/qrcode/^-^先看实例^-^&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;...
复制链接

扫一扫

专栏目录