【JavaScript】使用qrcode生成二维码

news2024/11/24 9:41:59

QRCode简介：

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

使用步骤：

点击下载：
https://github.com/davidshimjs/qrcodejs 或者mirrors / davidshimjs / qrcodejs · GitCode

用法一、

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/qrcode.min.js"></script>
</head>

<body>
    <div id="qrcode"></div>
    <script type="text/javascript">
        new QRCode(document.getElementById("qrcode"), "http://www.runoob.com");	//要生成二维码的链接
    </script>
</body>

</html>

用法二、

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/qrcode.min.js"></script>
</head>

<body>
    <div id="qrcode"></div>
    <script type="text/javascript">
        var qrcode = new QRCode("qrcode", {
            text: "https://blog.csdn.net/weixin_52479803?type=sub&spm=1011.2415.3001.5348",	//要生成二维码的链接
            width: 128,	//二维码的宽度
            height: 128,	//二维码的高度
            colorDark: "#000000",	//前景色
            colorLight: "#ffffff",	//背景色
            correctLevel: QRCode.CorrectLevel.H	//纠错等级
        });

    </script>
</body>

</html>

注解：

纠错等级：二维码容错率即是指二维码图标被遮挡多少后，仍可以被扫描出来的能力。容错率越高，则二维码图片能被遮挡的部分越多。大多数情况下，建议采用30%的容错率

重新生成二维码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <button onclick="again()">重新生成</button>
    <script src="./js/qrcode.min.js"></script>
</head>

<body>
    <div id="qrcode"></div>
    <script type="text/javascript">
        var qrcode = new QRCode("qrcode", {
            text: "https://blog.csdn.net/weixin_52479803?type=sub&spm=1011.2415.3001.5348",	//要生成二维码的链接
            width: 128,	//二维码的宽度
            height: 128,	//二维码的高度
            colorDark: "#000000",	//前景色
            colorLight: "#ffffff",	//背景色
            correctLevel: QRCode.CorrectLevel.H	//纠错等级
        });
        function again() {
            qrcode.clear(); //清除
            qrcode.makeCode("http://www.w3cschool.cc"); //要生成二维码的链接
        }
    </script>
</body>

</html>