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

时间：2022-11-18 21:51:46

一.简介

1.说明

qrcode其实是通过使用jQuery实现图形渲染，画图，支持canvas（HTML5）和table两种方式，您可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码。

2.语法格式 syntax

$(selector).qrcode(options);

3.参数说明 options

 1 {
 2     // render method: 'canvas', 'image' or 'div'
 3     render: 'canvas',
 4 
 5     // version range somewhere in 1 .. 40
 6     minVersion: 1,
 7     maxVersion: 40,
 8 
 9     // error correction level: 'L', 'M', 'Q' or 'H'
10     ecLevel: 'L',
11 
12     // offset in pixel if drawn onto existing canvas
13     left: 0,
14     top: 0,
15 
16     // size in pixel
17     size: 200,
18 
19     // code color or image element
20     fill: '#000',
21 
22     // background color or image element, null for transparent background
23     background: null,
24 
25     // content
26     text: 'no text',
27 
28     // corner radius relative to module width: 0.0 .. 0.5
29     radius: 0,
30 
31     // quiet zone in modules
32     quiet: 0,
33 
34     // modes
35     // 0: normal
36     // 1: label strip
37     // 2: label box
38     // 3: image strip
39     // 4: image box
40     mode: 0,
41 
42     mSize: 0.1,
43     mPosX: 0.5,
44     mPosY: 0.5,
45 
46     label: 'no label',
47     fontname: 'sans',
48     fontcolor: '#000',
49 
50     image: null
51 }

 

二.使用方法

1.静态添加

①.首先在页面中加入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插件:

qrcode支持canvas和table两种方式进行图片渲染，默认使用canvas方式，效率最高，当然要浏览器支持html5。直接调用如下：

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

您也可以通过以下方式调用：

1 $("#code").qrcode({ 
2     render: "table", //table方式 
3     width: 200, //宽度 
4     height:200, //高度 
5     text: "www.baidu.com" //任意内容 
6 });

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插件:

1 var QRcode = $('<div>');
2 QRcode.attr('id' ,"androidQR");  //为<div>添加属性id
3 QRcode.css('float' ,"right");  //这里演示如何进行css操作
4 QRcode.qrcode({
5     width: 110,
6     height:110,
7     text: 'http://www.baidu.com'
8 });
9 $('#code').append(QRcode); //将二维码元素添append到页面上id为‘code’的元素上

三.识别中文

jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码，如果有中文内容，在生成二维码前就要把字符串转换成UTF-8，然后再生成二维码。您可以通过以下函数来转换中文字符串：

 1 function toUtf8(str) {    
 2     var out, i, len, c;    
 3     out = "";    
 4     len = str.length;    
 5     for(i = 0; i < len; i++) {    
 6         c = str.charCodeAt(i);    
 7         if ((c >= 0x0001) && (c <= 0x007F)) {    
 8             out += str.charAt(i);    
 9         } else if (c > 0x07FF) {    
10             out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));    
11             out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));    
12             out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
13         } else {    
14             out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));    
15             out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
16         }    
17     }    
18     return out;    
19 }

示例代码如下：

1 var str = toUtf8("你真可爱！"); 
2 $('#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

标签：

相关文章