使用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