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

admin

. A* C, g3 k: m: r( [4 \演示地址：http://www.52itstyle.top/qrcode/index.html
- p# ^: I1 ?2 k+ ]( V4 Q) Z

+ S+ i( K4 K( I, r( t/ u先简单说一下jquery-qrcode，这个开源的三方库（可以从https://github.com/jeromeetienne/jquery-qrcode 获取），

4 D# w# D, M& `9 j: sqrcode.js 是实现二维码数据计算的核心类，
- ^; C1 ~- r' X
1 Y" ?6 o2 r' t5 k2 G# A- }jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和image、table三种方式）。
===============================================
JS生成中文二维码问题：
其实上面的js有一个小小的缺点，就是默认不支持中文。

这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，

& K4 u4 }' r' Z3 I$ i' J* z2 D+ S而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，

& N# R7 T) {0 n英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。
' V# @. S; E, y1 o7 A$ Z
/ p% o7 f# o* q: m解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：
找到插件中以下代码：

1. qrcode.stringToBytes = function(s) {
   . H* p' [6 d. g4 {4 q9 \- \( J. U; X
2.    var bytes = new Array();
   
3.    for (var i = 0; i < s.length; i += 1) {
   6 J: d' l3 L8 f! B/ O5 q6 ]
4.       var c = s.charCodeAt(i);
   6 x: O% [4 ]' ^! g7 i
5.       bytes.push(c & 0xff);
   
6.    }
   
7.   return bytes;

复制代码

加入中文编码：

1. //中文转换
   ) i, x+ N+ o! f: a
2.                 function utf16to8(str) {  
   . |$ n2 p7 H& D7 Q
3.                         var out, i, len, c;  
   
4.                         out = "";  
   
5.                         len = str.length;  
   ! U8 ~: \; r( L
6.                         for(i = 0; i < len; i++) {  
   8 i& d& Z" s- [' b0 Z
7.                         c = str.charCodeAt(i);  
   0 O( e& ^+ x1 f; Z
8.                         if ((c >= 0x0001) && (c <= 0x007F)) {  
   
9.                                 out += str.charAt(i);  
   / k$ ~$ F7 E0 E) e+ x. M# x
10.                         } else if (c > 0x07FF) {  
    ) c. ~8 C! Q" \& T, K: v9 q
11.                                 out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
    2 a1 k1 I- X' t8 l) ?, ~
12.                                 out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
    
13.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    * W/ f! `5 f" d/ E- V" l2 E# f
14.                         } else {  
    * B, m/ {2 B! s3 k
15.                                 out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
    
16.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    6 n' s) g. C$ U" }
17.                         }  
    
18.                         }  
    3 p4 V/ H3 e( F' I9 a9 W* {
19.                         return out;  
    
20.                 }

复制代码

修改后：

1.         qrcode.stringToBytes = function(s) {
   
2.                     s=utf16to8(s);
   $ R) E% W6 W% x* Q  Y6 j+ b
3.                         var bytes = new Array();
   % d4 r! t5 a$ r" D4 F5 ]7 s! U
4.                         for (var i = 0; i < s.length; i += 1) {
   & z& |, w1 p9 W" ~  e$ _: I
5.                                 var c = s.charCodeAt(i);
   1 K9 Z" D9 I9 ^" T* |1 f% m- R
6.                                 bytes.push(c & 0xff);
   7 p& Z4 ]2 Y& A( ]  j
7.                         }
   % [! ~- e3 G; {! c/ `; w
8.                         return bytes;
   
9.                 };

复制代码

中文乱码测试：
3 [3 G: \5 Q, ^1 \9 K0 a' v

) ^9 D* D0 I0 r& C1 M1 y


5 {! Q( A5 ^2 @9 d  q: c6 e
9 i9 }, I9 u& ?9 i5 S) N! N' l9 [演示样例：



: B: w9 T. @$ l$ F 百度网盘下载地址.zip (225 Bytes, 下载次数: 4, 售价: 5 IT币)

2015-4-23 17:26 上传

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

3 j( ]; n, G2 l+ L$ f; ?
8 F% J; `- X/ }9 ~

万蕊科技

不错 功能 很多         

记忆的梗上

终于可以回复了

小星星520

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

贝斯特

$ c- G' i( J: y* e+ z4 z- q资源有点让我小激动呢

贝斯特

, n3 m& l/ P: V资源有点让我小激动呢

贝斯特

资源有点让我小激动呢

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多