jquery qrcode二維碼生成外掛
二維碼應用已經滲透到我們的生活工作當中,您只需要用手機對著二維碼“掃一掃”即可獲得所對應的資訊,方便我們瞭解商家、購物、觀影等等。那麼如何生成二維碼呢?作為網站開發人員,有必要了解一下,本文將介紹一款基於jquery的二維碼生成外掛qrcode,在頁面中呼叫該外掛就能生成對應的二維碼。
一、qrcode介紹
qrcode其實是通過使用jQuery實現圖形渲染,畫圖,支援canvas(HTML5)和table兩種方式,您可以到https://github.com/jeromeetienne/jquery-qrcode獲取最新的程式碼。
使用canvas方式渲染效能還是非常不錯的,但是如果用table方式,效能不太理想,特別是IE9以下的瀏覽器,所以需要自行優化一下渲染table的方式,這裡就不細述了。
二、使用方法
1、引入外掛
首先在頁面中加入jquery庫檔案和qrcode外掛。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
2、建立顯示div
在頁面中需要顯示二維碼的地方加入以下程式碼:
<div id="code"></div>
3、呼叫qrcode外掛
qrcode支援canvas和table兩種方式進行圖片渲染,預設使用canvas方式,效率最高,當然要瀏覽器支援html5。直接呼叫如下:
$('#code').qrcode("http://www.helloweba.com"); //任意字串
您也可以通過以下方式呼叫:
$("#code").qrcode({
render: "table", //table方式
width: 200, //寬度
height:200, //高度
text: "www.helloweba.com" //任意內容
});
這樣就可以在頁面中直接生成一個二維碼,你可以用手機“掃一掃”功能讀取二維碼資訊。
三、引數配置
外掛預設的引數如下,你可以根據你的需要去設定這些引數。
{
// render method: `'canvas' `, `'image'` or `'div'`
render: 'canvas',
// version range somewhere in 1 .. 40
minVersion: 1,
maxVersion: 40,
// error correction level: `'L'`, `'M'`, `'Q'` or `'H'`
ecLevel: 'L',
// offset in pixel if drawn onto existing canvas
left: 0,
top: 0,
// size in pixel
size: 200,
// code color or image element
fill: '#000',
// background color or image element, `null` for transparent background
background: null,
// content
text: 'no text',
// corner radius relative to module width: 0.0 .. 0.5
radius: 0,
// quiet zone in modules
quiet: 0,
// modes
// 0: normal
// 1: label strip
// 2: label box
// 3: image strip
// 4: image box
mode: 0,
mSize: 0.1,
mPosX: 0.5,
mPosY: 0.5,
label: 'no label',
fontname: 'sans',
fontcolor: '#000',
image: null
}
四、解決無法識別中文
其實上面的js有一個小小的缺點,就是預設不支援中文。這跟js的機制有關係,jquery-qrcode這個庫是採用 charCodeAt() 這個方式進行編碼轉換的,而這個方法預設會獲取它的 Unicode 編碼,一般的解碼器都是採用UTF-8, ISO-8859-1等方式,英文是沒有問題,如果是中文,一般情況下Unicode是UTF-16實現,長度2位,而UTF-8編碼是3位,這樣二維碼的編解碼就不匹配了。
解決方式當然是,在二維碼編碼前把字串轉換成UTF-8,具體程式碼如下:
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;
}