方式一：qrcode-generator
落地代码
<!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>
<!-- ◆引入 js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.1/qrcode.min.js"></script>
</head>
<body>
<!-- ◆准备一个 DOM 容器 -->
<div id="qrcode"></div>
<script type="text/javascript">
// ◆创建二维码对象
const qr = qrcode(4, 'H');
// ◆添加二维码信息
qr.addData('http://www.baidu.com');
// ◆生成二维码对象(并不显示)
qr.make();
// ◆获取二维码每行（orientation）的 cell 数
const width = 125;
const margin = 2;
const moduleCount = qr.getModuleCount();
const cell = (width - margin * 2) / moduleCount;
// ◆显示二维码
// document.getElementById('qrcode').innerHTML = qr.createTableTag(cell, margin);
// document.getElementById('qrcode').innerHTML = qr.createSvgTag(cell, margin);
document.getElementById('qrcode').innerHTML = qr.createImgTag(cell, margin);
</script>
</body>
</html>
页面效果
重点解析 qrcode(Number,String)
| 参数 | 类型 | 说明 |
|---|---|---|
| typeNumber | Number | 二维码类型(1~40,输入 0 以自动检测) |
| errorCorrectionLevel | String | 容错级别(L、M、Q、H) |
方式二：qrcodejs
落地代码
<!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>
<!-- ◆引入 js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
<!-- ◆准备一个 DOM 容器 -->
<div id="qrcode"></div>
<script type="text/javascript">
// ◆简单方式
// new QRCode(document.getElementById('qrcode'), 'your content');
const qrcode = new QRCode(document.getElementById("qrcode"), {
// ◆设置渲染方式 table/canvas
render:'table',
// ◆扫描二维码后显示的内容
text: "https://www.baidu.com",
// ◆二维码的宽度
width: 125,
// ◆二维码的高度
height: 125,
// ◆二维码背景色
// colorDark : "#999999",
// ◆二维码的前景色
// colorLight : "#000000",
// ◆二维码的容错级别
correctLevel : QRCode.CorrectLevel.H,
});
// ◆some methods
// 1.clear the code.
// qrcode.clear();
// 2.make another code.
// qrcode.makeCode("https://jd.com");
</script>
</body>
</html>
