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

admin

4 W5 j+ J) v0 r' y5 l6 `+ ?
9 G& m/ ^) X8 C演示地址：http://www.52itstyle.top/qrcode/index.html


2 Y6 y, `" Q% W" I) F先简单说一下jquery-qrcode，这个开源的三方库（可以从https://github.com/jeromeetienne/jquery-qrcode 获取），

qrcode.js 是实现二维码数据计算的核心类，

jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和image、table三种方式）。
" W- ?  }2 i5 ^' e- ]$ [9 W===============================================
, L0 c4 j  m1 I! EJS生成中文二维码问题：
! D0 C, n: ~8 I! N0 l' Q8 w其实上面的js有一个小小的缺点，就是默认不支持中文。
( U0 Z+ Y) I/ }% q5 l9 c. H' f
这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，

而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，
: K/ q8 w- G# o( P
  }- N, X, g' X1 h  s/ R+ \英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。
7 q+ U, P# D0 i" u+ @. c
解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：
找到插件中以下代码：
1 d5 b+ l1 m# o4 \& l. Y

1. qrcode.stringToBytes = function(s) {
   7 G& ?4 ~; K. s0 i: X8 ~$ B
2.    var bytes = new Array();
     S" |! h. u, n  ?0 G- K/ ?8 Y
3.    for (var i = 0; i < s.length; i += 1) {
   5 Y- e9 v* g) p$ I; T
4.       var c = s.charCodeAt(i);
   
5.       bytes.push(c & 0xff);
   + q4 y8 |0 C! j0 Q  \
6.    }
   ! h/ ?( }  [) b. i, a6 g* U
7.   return bytes;

复制代码

加入中文编码：

1. //中文转换
   1 _( e3 V* k# \5 z$ T! v
2.                 function utf16to8(str) {  
   * H. @6 U; ~1 ^
3.                         var out, i, len, c;  
   & o9 s: e3 Y1 F4 z% o
4.                         out = "";  
   
5.                         len = str.length;  
   0 |' o! c" p: l# G( A  z, o
6.                         for(i = 0; i < len; i++) {  
   
7.                         c = str.charCodeAt(i);  
   ! C. T1 ]/ ~* q  y  d+ K$ S) n
8.                         if ((c >= 0x0001) && (c <= 0x007F)) {  
   9 C. S5 l6 T& x2 f3 n
9.                                 out += str.charAt(i);  
   
10.                         } else if (c > 0x07FF) {  
    0 P2 Z) |+ x* Z( S3 o& H3 ?
11.                                 out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
    ; o* ~; u/ M. {3 S, p7 B$ H
12.                                 out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
    , H9 w: U9 A  l0 H* _
13.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    9 P& g& S% N6 c9 ?
14.                         } else {  
    
15.                                 out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
    
16.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    1 {  a- x! T8 u2 y
17.                         }  
    4 E' K+ A- }$ a! ]# ]
18.                         }  
    * a4 k* H# v) f' v8 _
19.                         return out;  
    
20.                 }

复制代码

修改后：

1.         qrcode.stringToBytes = function(s) {
   
2.                     s=utf16to8(s);
   
3.                         var bytes = new Array();
     z0 [2 k* u. ?7 p% [5 O8 m( _
4.                         for (var i = 0; i < s.length; i += 1) {
   
5.                                 var c = s.charCodeAt(i);
   
6.                                 bytes.push(c & 0xff);
   7 v7 E4 P( K! y$ [/ L/ I. _! C
7.                         }
   * {' q4 i) f4 r  f; b/ n
8.                         return bytes;
   
9.                 };

复制代码

中文乱码测试：

! {" B4 Q. e. @2 l3 U, P4 o( }
* S5 a5 d9 Q. a
9 x7 O9 J: n: n. _2 p5 q
& `4 d$ _# V7 ?/ n  [, o; l
) ]7 L7 C$ [# f8 E+ i7 M
演示样例：
0 j6 S' b( [" L, n

6 D- b0 T5 c  A& }% X' l
: n7 T* J6 o( p# u. S 百度网盘下载地址.zip (225 Bytes, 下载次数: 4, 售价: 5 IT币)

2015-4-23 17:26 上传

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

万蕊科技

不错 功能 很多         

记忆的梗上

终于可以回复了

小星星520

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

贝斯特

) ~7 G* a) M9 J' s/ j, I! ?: D9 n资源有点让我小激动呢

贝斯特

资源有点让我小激动呢

贝斯特

4 S2 ^1 G4 W! c$ B- p6 r资源有点让我小激动呢

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多