使用jQuery的插件qrcode生成二維碼（靜態+動態生成）及常見問題解決方法

一.簡介

1.說明

qrcode其實是通過使用jQuery實現圖形渲染，畫圖，支持canvas（HTML5）和table兩種方式，您可以到https://github.com/jeromeetienne/jquery-qrcode獲取最新的代碼。

2.語法格式 syntax

$(selector).qrcode(options);

3.參數說明 options

{
    // 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
}

 

二.使用方法

1.靜態添加

①.首先在頁面中加入jquery庫文件和qrcode插件：

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

②.在頁面中需要顯示二維碼的地方加入以下代碼：

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

③.調用qrcode插件:

qrcode支持canvas和table兩種方式進行圖片渲染，默認使用canvas方式，效率最高，當然要瀏覽器支持html5。直接調用如下：

$('#code').qrcode("http://www.baidu.com"); //任意字符串 

您也可以通過以下方式調用：

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

2.動態添加

①.首先在頁面中加入jquery庫文件和qrcode插件（同上）：

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

②.在頁面中需要顯示二維碼的地方加入以下代碼（同上）：

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

③.調用qrcode插件:

var QRcode = $('<div>');
QRcode.attr('id' ,"androidQR");  //為<div>添加屬性id
QRcode.css('float' ,"right");  //這里演示如何進行css操作
QRcode.qrcode({
    width: 110,
    height:110,
    text: 'http://www.baidu.com'
});
$('#code').append(QRcode); //將二維碼元素添append到頁面上id為‘code’的元素上

三.識別中文

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

 

參考：　http://www.helloweba.com/view-blog-226.html

　　　　https://larsjung.de/jquery-qrcode/

 

四.其他生成二維碼的方法

除了jquery，還有很多可以生成二維碼的方法，例如：

1.利用Google API生成二維碼

2.使用PHP二維碼生成類庫PHP QR Code生成二維碼

3.使用原生JavaScript生成二維碼

等方法，本文不作說明。

1和2請參考： http://www.jb51.net/article/48124.htm

3請參考：　　http://www.cnblogs.com/yisheng163/p/4472687.html