二維碼應用已經滲透到我們的生活工作當中，您只需要用手機對著二維碼“掃一掃”即可獲得所對應的信息，方便我們瞭解商家、購物、觀影等等。
本經驗將介紹一款基於jquery的二維碼生成插件qrcode，在頁面中調用該插件就能生成對應的二維碼。
jquery.qrcode.js 是一個純瀏覽器 生成 QRcode 的 jQuery 插件，它使用非常簡單，生成的 QRcode 無需下載圖片，並且不依賴第三方服務，比如最近 Google 服務在國內訪問不穩就造成我好幾個網站的 QRcode 不能使用，並且壓縮之後大小小於 4K。
jquery-qrcode，這個開源的三方庫qrcode.js 是實現二維碼數據計算的核心類， jquery.qrcode.js 是把它用jquery方式封裝起來的，用它來實現圖形渲染，其實就是畫圖（支持HTML 5canvas和table兩種方式）
工具/原料
筆記本電腦或是臺式機
互聯網
qrcode二維碼插件
方法/步驟
jQuery.qrcode enables you to dynamically add QR codes to your website. Choose between rendering the code in a canvas or with divs. The latter will be fine even for older browser. The generated QR code will be in the least possible version requiered to encode the content (least number of blocks).
在GitHub上，下載qrcode二維碼插件。如下圖所示。
解壓文件夾，將jquery.qrcode.min.js拷貝到項目目錄中，新建index.html文件。
在頁面中加入jquery庫文件和qrcode插件
在頁面中需要顯示二維碼的地方加入以下代碼：
調用qrcode插件，qrcode支持canvas和table兩種方式進行圖片渲染，默認使用canvas方式，效率最高，當然要瀏覽器支持html5。直接調用如下：
$('#code').qrcode("demo"); //任意字符串
您也可以通過以下方式調用：
$("#code").qrcode({
render: "table", //table方式
width: 200, //寬度
height:200, //高度
text: "demo" //任意內容
});
默認生成的二維碼大小是 256×256，當然可以自定義大小：
這樣就可以在頁面中直接生成一個二維碼，你可以用手機“掃一掃”功能讀取二維碼信息。
識別中文，試驗的時候發現不能識別中文內容的二維碼，通過查找多方資料瞭解到，jquery-qrcode是採用charCodeAt()方式進行編碼轉換的。而這個方法默認會獲取它的Unicode編碼，如果有中文內容，在生成二維碼前就要把字符串轉換成UTF-8，然後再生成二維碼。您可以通過以下函數來轉換中文字符串：
function toUtf8(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;
}
以下示例：
var str = toUtf8("這個我的二維碼");
$('#code').qrcode(str);
案例1 ：二維碼基本功能
TODO make a nice looking pure client qrcode generator
even allow download of the image
二維碼基本效果圖，如下圖所示。
例2 二維碼兩種實現方式
Render in table
Render in canvas
綜上所述，jquery-qrcode可以用兩種方式實現二維碼，使用canvas方式渲染性能還是非常不錯的，但是如果用table方式，性能不太理想，特別是IE9以下的瀏覽器，所以需要自行優化一下渲染table的方式，這裡就不細述了。
基本參數設置如下所示：
text : "demo" //設置二維碼內容
render : "canvas",//設置渲染方式
width : 256, //設置寬度
height : 256, //設置高度
typeNumber : -1, //計算模式
correctLevel : QRErrorCorrectLevel.H,//糾錯等級
background : "#ffffff",//背景顏色
foreground : "#000000" //前景顏色
注意事項
jquery-qrcode依賴於JQuery插件
jquery.qrcode.js 是一個純瀏覽器 生成 QRcode 的 jQuery 插件，它使用非常簡單，生成的 QRcode 無需下載圖片，並且不依賴第三方服務