二維碼應用已經滲透到我們的生活工作當中，您只需要用手機對著二維碼“掃一掃”即可獲得所對應的資訊，方便我們瞭解商家、購物、觀影等等。那麼如何生成二維碼呢？作為網站開發人員，有必要了解一下，本文將介紹一款基於jquery的二維碼生成外掛qrcode，在頁面中呼叫該外掛就能生成對應的二維碼。
一、qrcode介紹
qrcode其實是通過使用jQuery實現圖形渲染，畫圖，支援canvas（HTML5）和table兩種方式，您可以到https://github.com/jeromeetienne/jquery-qrcode獲取最新的程式碼。
使用canvas方式渲染效能還是非常不錯的，但是如果用table方式，效能不太理想，特別是IE9以下的瀏覽器，所以需要自行優化一下渲染table的方式，這裡就不細述了。
二、使用方法

<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;  
}