基於jquery類庫的繪製二維碼的外掛程式jquery.qrcode.js

標籤：文本   tle   jquery   table   round   錯誤修正   元素   相容   asc   

在項目中PC端支付的時候需要前端通過js的方式產生一個二維碼，二維碼內容為後台傳過來的json資料
jquery.qrcode.js 是基於jquery類庫的繪製二維碼的外掛程式，在頁面中調用該外掛程式就能產生對應的二維碼。用它來實現二維碼圖形渲染支援canvas和table兩種繪圖方式。（jquery.qrcode.js 設定顯示方式為table時在webkit核心瀏覽器如chrome下會變形，這個需要注意。）
Qrcode產生二維碼可以使用jquery.qrcode.min.js外掛程式
官網地址 https://larsjung.de/jquery-qrcode/
1:載入 jquery.min.js 和 jquery.qrcode.min.js
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
2:建立一個用於包含 QRcode 圖片的 DOM 元素
<div id="qrcode">
<div id="codeico"></div>
</div>
3:js
<script>
//generateQRCode產生二維碼的封裝函數
function generateQRCode(rendermethod, picwidth, picheight, url) {
$("#qrcode").qrcode({
　　render: rendermethod, // 渲染方式有table方式（IE相容）和canvas方式，預設使用canvas方式
　　width: picwidth, //二維碼寬度
　　height:picheight, //二維碼高度
　　text: utf16to8(url), //設定二維碼文本的內容
　　typeNumber:-1,//計算模式
　　correctLevel:2,//二維碼錯誤修正層級
　　background:"blue",//背景顏色
　　foreground:"#fff" //二維碼顏色
});
}
generateQRCode("table",300, 300, "二維碼"); //可以在頁面中直接產生一個二維碼，可以用手機讀取二維碼資訊。
//jquery-qrcode這個庫是採用 charCodeAt這個方式進行編碼轉換的，而這個方法預設會擷取它的 Unicode 編碼，英文是沒有問題，如果是中文，需要進行
//中文編碼格式轉換
function utf16to8(str) {
　　var out, i, len, c;
　　out = "";
　　len = str.length;
　　for (i = 0; i < len; i++) {
　　　　c = str.charCodeAt(i);
　　　　if ((c >= 0x0001) && (c <= 0x007F)) {
　　　　　　out += str.charAt(i);
　　　　} else if (c > 0x07FF) {
　　　　　　out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
　　　　　　out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
　　　　　　out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
　　　　} else {
　　　　　　out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
　　　　　　out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
　　　　}
　　}
　　return out;
}
</script>

基於jquery類庫的繪製二維碼的外掛程式jquery.qrcode.js