Introduction to QRCode:
QRCode.js is a JavaScript library for generating QR codes. It is mainly obtained by obtaining DOM tags, and then drawn by HTML5 Canvas, without relying on any library.
Steps for usage:
Click to download:
https://github.com/davidshimjs/qrcodejs or mirrors / davidshimjs / qrcodejs · GitCode
Usage one,
<!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>Usage two,
<!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>annotation:
Error correction level: The error tolerance rate of the QR code refers to the ability to scan the QR code icon after how much it is blocked. The higher the error tolerance rate, the more parts of the QR code image can be blocked. In most cases, a 30% fault tolerance is recommended
Regenerate the QR code:
<!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>Effect:
