Jquery.Qrcode在用戶端動態產生二維碼並添加自訂Logo

標籤：

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下載

Jquery.Qrcode在用戶端動態產生二維碼並添加自訂Logo