整体代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>二维码生成</title>
<link href="${base}/favicon.ico" rel="icon">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
<script src="js/jquery.js"></script>
<script src="js/jquery.qrcode.js"></script>
<style>
</style>
<script>
$().ready(function() {
// 二维码
$qrcode.qrcode({
width: 300,
height: 300,
text: "www.20eit.cn"
});
});
</script>
</head>
<body>
<div class="container">
<div class="wx-qr-box" id="qrcode" class="qrcode"></div>
</div>
</body>
</html>
整体代码及案例:
https://gitee.com/20eit/eit/tree/master/qrcode/
更多使用案例引用:https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://www.runoob.com"); // 设置要生成二维码的链接
</script>
或者使用一些可选参数设置:
var qrcode = new QRCode("test", {
text: "http://www.runoob.com",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
同样我们可以使用以下方法:
qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码
支持该库的浏览器有:IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等。
<input id="text" type="text" value="http://www.runoob.com" /><br />
<div id="qrcode"></div>
#qrcode {
width:160px;
height:160px;
margin-top:15px;
}
var qrcode = new QRCode("qrcode");
function makeCode () {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});