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);最終結果如下
以上所述是小編給大家介紹的使用jQuery.Qrcode插件在客戶端動態生成二維碼并添加自定義Logo，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
