使用jquery外掛qrcode生成二維碼

NO IMAGE

二維碼應用已經滲透到我們的生活工作當中,您只需要用手機對著二維碼“掃一掃”即可獲得所對應的資訊,方便我們瞭解商家、購物、觀影等等。本文將介紹一款基於jquery的二維碼生成外掛qrcode,在頁面中呼叫該外掛就能生成對應的二維碼。
qrcode其實是通過使用jQuery實現圖形渲染,畫圖,支援canvas(HTML5)和table兩種方式,您可以到獲取最新的程式碼。

如何使用
1、首先在頁面中加入jquery庫檔案和qrcode外掛。


<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.qrcode.min.js"></script> 

2、在頁面中需要顯示二維碼的地方加入以下程式碼:


<div id="code"></div> 

3、呼叫qrcode外掛。
qrcode支援canvas和table兩種方式進行圖片渲染,預設使用canvas方式,效率最高,當然要瀏覽器支援html5。直接呼叫如下:


$('#code').qrcode("//www.jb51.net"); //任意字串 

您也可以通過以下方式呼叫:


$("#code").qrcode({ 
render: "table", //table方式 
width: 200, //寬度 
height:200, //高度 
text: "//www.jb51.net" //任意內容 
}); 

這樣就可以在頁面中直接生成一個二維碼,你可以用手機“掃一掃”功能讀取二維碼資訊。
識別中文
我們試驗的時候發現不能識別中文內容的二維碼,通過查詢多方資料瞭解到,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); 

現在網上製作二維碼的教程特別多,大家要學會靈活運用,選擇自己最喜歡的方法掌握二維碼的製作技巧。

您可能感興趣的文章:

javaScript生成支援中文帶logo的二維碼(jquery.qrcode.js)使用jquery.qrcode.js生成二維碼外掛使用jQuery.Qrcode外掛在客戶端動態生成二維碼並新增自定義LogojQuery qrcode生成二維碼的方法使用jquery.qrcode.min.js實現中文轉化二維碼jquery外掛qrcode線上生成二維碼使用jquery元件qrcode生成二維碼及應用指南使用jquery.qrcode生成彩色二維碼例項利用jquery.qrcode在頁面上生成二維碼且支援中文基於jquery二維碼生成外掛qrcode