【前端】利用qrcode.js生成二維碼
阿新 • • 發佈：2019-08-14
整體程式碼示例：
<!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 生成二維碼
分類 程式設計技術
什麼是 QRCode.js？
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, 等。
例項程式碼
HTML 程式碼
<input id="text" type="text" value="http://www.runoob.com" /><br /> <div id="qrcode"></div>
CSS 程式碼
#qrcode {
width:160px;
height:160px;
margin-top:15px;
}
JavaScript 程式碼
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();
}
});
資源下載
Qrcode 庫及例項下載：qrcodejs-04f46c6.zip
Github 地址：https://github.com/dav