jquery生成二维码源代码(案例演示)

admin

演示地址：http://www.52itstyle.top/qrcode/index.html

2 C4 j: }, t* s" P+ H8 i' t
先简单说一下jquery-qrcode，这个开源的三方库（可以从https://github.com/jeromeetienne/jquery-qrcode 获取），

8 i7 e; @7 `' b7 [) v1 \+ P4 vqrcode.js 是实现二维码数据计算的核心类，
5 W; R$ f# h* q8 H
jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和image、table三种方式）。
5 ~' X3 x7 m! l) [' I1 l% U; w===============================================
4 W* r. @& M( ]6 aJS生成中文二维码问题：
) P5 A% S$ s% z2 x" H其实上面的js有一个小小的缺点，就是默认不支持中文。

# n1 r/ B4 G' T+ L+ L这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，
+ f0 Q3 s* M- @- b# V' R
而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，

; p8 u& S) R2 Z* a' F* q$ Q英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。
/ {( a& A* D/ q
解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：
7 e, C* x& b% u, D找到插件中以下代码：

1. qrcode.stringToBytes = function(s) {
   7 V4 O: k+ q& G* H9 s
2.    var bytes = new Array();
   
3.    for (var i = 0; i < s.length; i += 1) {
   9 j% U8 u9 ?- ]
4.       var c = s.charCodeAt(i);
   8 u% s$ U5 W+ _7 k
5.       bytes.push(c & 0xff);
   
6.    }
   ( a7 `& @$ Q* J' D% L4 T: C$ k
7.   return bytes;

复制代码

加入中文编码：

1. //中文转换
     q! `# }) v( |2 R3 i
2.                 function utf16to8(str) {  
   
3.                         var out, i, len, c;  
   
4.                         out = "";  
   ) @8 @# Z( T' @8 m; E, @
5.                         len = str.length;  
   % T  a$ B" [$ G- o1 {. n0 r" ^. [
6.                         for(i = 0; i < len; i++) {  
   ( k( e! s. j0 U# I. N6 C
7.                         c = str.charCodeAt(i);  
   4 q$ C3 m# J4 g# O# Q4 C6 |1 m! }
8.                         if ((c >= 0x0001) && (c <= 0x007F)) {  
   
9.                                 out += str.charAt(i);  
   2 d* @, E* |5 p& T/ m
10.                         } else if (c > 0x07FF) {  
    
11.                                 out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
    
12.                                 out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
    
13.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    
14.                         } else {  
    
15.                                 out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
    * O/ r' E+ B) R/ w, o
16.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    
17.                         }  
    
18.                         }  
    
19.                         return out;  
    " N: c4 Y* t) p2 o- P2 M) F0 U% B
20.                 }

复制代码

修改后：
! ]/ P1 L9 `" _: b: N1 c

1.         qrcode.stringToBytes = function(s) {
   
2.                     s=utf16to8(s);
   % j: ], r( S% F9 I8 Y& l# [6 e2 }
3.                         var bytes = new Array();
   6 o0 H/ ]& a( D- K0 N7 X4 H+ h( z
4.                         for (var i = 0; i < s.length; i += 1) {
   
5.                                 var c = s.charCodeAt(i);
   
6.                                 bytes.push(c & 0xff);
   
7.                         }
   
8.                         return bytes;
   
9.                 };

复制代码

中文乱码测试：

1 u: O0 k+ a* g; a



7 _. J% W3 L4 j7 `! [
演示样例：

' v/ M( n  v5 X" ^' T

7 R, [& b/ A& b; g1 Y9 a2 A" U 百度网盘下载地址.zip (225 Bytes, 下载次数: 4, 售价: 5 IT币)

2015-4-23 17:26 上传

点击文件名下载附件
售价: 5 IT币  [记录]

. ?8 E- c" l- {! w

万蕊科技

不错 功能 很多         

记忆的梗上

终于可以回复了

小星星520

好好学习，我会努力，加油！

贝斯特

资源有点让我小激动呢

贝斯特

; b, B1 T3 x7 Q资源有点让我小激动呢

贝斯特

资源有点让我小激动呢

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多