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