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

admin

; B5 K( y6 d5 R5 X. E+ C演示地址：http://www.52itstyle.top/qrcode/index.html
  d# V$ Y, W! x' V, g" h
0 D8 U  a& [- u4 n: T, e
先简单说一下jquery-qrcode，这个开源的三方库（可以从https://github.com/jeromeetienne/jquery-qrcode 获取），

qrcode.js 是实现二维码数据计算的核心类，
+ E& r/ A  z2 p" z" \7 x1 [. W
jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和image、table三种方式）。
8 s5 Y- z" J4 L& Y8 d===============================================
JS生成中文二维码问题：
$ i5 ^7 K4 R4 s; Y其实上面的js有一个小小的缺点，就是默认不支持中文。
; Z* T' k: O5 y
这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，
# P$ L) E& r: C( k# C
5 a% \& \0 `6 A/ n而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，

英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。
# H9 I  n. Z8 T3 W* M( Y
解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：
找到插件中以下代码：

1. qrcode.stringToBytes = function(s) {
   1 [* i4 k* o: }8 R% ~" m. |6 j
2.    var bytes = new Array();
   9 ~% m- p, i+ h. J/ {" V
3.    for (var i = 0; i < s.length; i += 1) {
   : y% F9 Z, p! m& p6 n6 U
4.       var c = s.charCodeAt(i);
   4 A$ a! `  s1 w1 C
5.       bytes.push(c & 0xff);
   
6.    }
   " {6 ~0 b, p: w+ t
7.   return bytes;

复制代码

加入中文编码：

1. //中文转换
   
2.                 function utf16to8(str) {  
   
3.                         var out, i, len, c;  
   1 R  W+ O% n0 B4 j& J; m2 S
4.                         out = "";  
     B( S, K  z/ m: K
5.                         len = str.length;  
   - e1 j2 _! H) f# m1 I1 l. X
6.                         for(i = 0; i < len; i++) {  
   & m! s' ~+ l: N: l# x2 ]3 {; H
7.                         c = str.charCodeAt(i);  
   4 y9 K1 d5 |9 p  l
8.                         if ((c >= 0x0001) && (c <= 0x007F)) {  
   
9.                                 out += str.charAt(i);  
   $ u1 Z  C; A3 W
10.                         } else if (c > 0x07FF) {  
    
11.                                 out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
    + j+ @3 A* s, o) U$ w, ^9 \
12.                                 out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
    
13.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    1 n  `1 \/ W' I4 ~" E7 Q- T! G
14.                         } else {  
    
15.                                 out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
    
16.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    
17.                         }  
    
18.                         }  
    
19.                         return out;  
    
20.                 }

复制代码

修改后：

1.         qrcode.stringToBytes = function(s) {
   0 ~- W2 D* b# v/ G& s( H" B8 Z
2.                     s=utf16to8(s);
   
3.                         var bytes = new Array();
   
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.                 };

复制代码

中文乱码测试：





$ Q, J4 w, c( m6 d$ Z7 }5 n# }% _
演示样例：

0 c5 _6 k- l. N- d3 _7 ~

百度网盘下载地址.zip (225 Bytes, 下载次数: 4, 售价: 5 IT币)

2015-4-23 17:26 上传

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

万蕊科技

不错 功能 很多         

记忆的梗上

终于可以回复了

小星星520

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

贝斯特

% G! \% D% k4 y- P' A( R( x资源有点让我小激动呢

贝斯特

资源有点让我小激动呢

贝斯特

资源有点让我小激动呢

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多