0 Jquery.Qrcode簡介
Jquery.Qrcode.js是一個在瀏覽器端基於Jquery動態生成二維碼的插件,支持Canvas和Table兩種渲染方式,它的優點是在客戶端動態生成,減輕了服務端壓力,尤其是在大量使用二維碼的系統中。Jquery.Qrcode主要包括以下參數設置:
- render 定義二維碼的渲染方式,有table和canvas兩種渲染方式
- width 定義二維碼的寬度
- height 定義二維碼的高度
- text 定義二維碼內容
- typeNumber 二維碼的計算模式 一般默認為-1
- correctLevel 二維碼的糾錯級別
- background 定義二維碼的背景顏色
- foreground 定義二維碼的前景色
1 Jquery.Qrcode基本使用
1.0 添加相關引用
Jquery.Qrcode僅僅依賴於Jquery,所以我們只需要添加Jquery及Jquery.Qrcode的引用即可。
<script src="~/Content/js/jquery-2.1.4.min.js"></script> <script src="~/Content/js/jquery.qrcode.min.js"></script>
1.1 添加渲染區域元素
Jquery.Qrcode使用div元素作為渲染的目標區域,在頁面上添加一個div標簽。
<div id="qrCodeDiv"> </div>
1.2 二維碼生成
$("#qrCodeDiv").qrcode({ render: "canvas", // 渲染方式有table方式(IE兼容)和canvas方式 width: 260, //寬度 height: 260, //高度 text: "www.baidu.com", //內容 typeNumber: -1,//計算模式 correctLevel: 2,//二維碼糾錯級別 background: "#ffffff",//背景顏色 foreground: "#000000" //二維碼顏色 });
二維碼生成如下
2 Jquery.Qrcode對中文字符的支持
默認的Jquery.Qrcode是不支持中文編碼的,上面我們如果將text的內容設置為中文字符串,生成二維碼並掃描后會發現結果是亂碼。這是因為jquery.qrcode采用 charCodeAt() 方式進行編碼轉換,默認采用UTF-8方式編碼,而針對中文一般情況下是采用UTF-16編碼實現,這樣就會導致亂碼的出現,解決方案就是在二維碼編碼前,將二維碼的內容字符串轉換成UTF-8格式,js轉換方法如下。
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; };
生成二維碼時,將轉碼后的結果作為text的值即可
$("#qrCodeDiv").qrcode({ render: "canvas", // 渲染方式有table方式(IE兼容)和canvas方式 width: 260, //寬度 height: 260, //高度 text: utf16to8("漢字內容的二維碼"), //內容 typeNumber: -1,//計算模式 correctLevel: 2,//二維碼糾錯級別 background: "#ffffff",//背景顏色 foreground: "#000000" //二維碼顏色 });
3 Jquery.Qrcode添加自定義Logo圖片
給二維碼添加一個自定義的logo,會讓你的二維碼看上去更專業,默認的Jquery.Qrcode是不支持添加自定義Logo的,這里比較簡單的實現方案就是,針對每個二維碼添加一個img標簽,讓img在二維碼區域相對居中顯示即可。
<img id="qrCodeIco" src="~/images/logo.png" style="position: absolute;width: 30px; height: 30px;" />
控制img標簽的位置
var margin = ($("#qrCodeDiv").height() - $("#qrCodeIco").height()) / 2; //控制Logo圖標的位置 $("#qrCodeIco").css("margin", margin);
最終結果如下