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

巴特西

使用jQuery的插件qrcode生成二维码（静态+动态生成）及常见问题解决方法

一.简介

1.说明

2.语法格式 syntax

3.参数说明 options

二.使用方法

1.静态添加

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

②.在页面中需要显示二维码的地方加入以下代码：

③.调用qrcode插件:

2.动态添加

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

②.在页面中需要显示二维码的地方加入以下代码（同上）：

③.调用qrcode插件:

三.识别中文

四.其他生成二维码的方法

1.利用Google API生成二维码

2.使用PHP二维码生成类库PHP QR Code生成二维码

3.使用原生JavaScript生成二维码

最新文章

热门文章