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

admin

) |9 g& ?# x" g  d" T演示地址：http://www.52itstyle.top/qrcode/index.html
6 y4 j2 V9 z( f3 ^9 F, t
" S1 `( Y- F1 O3 g1 Y0 ^7 \
先简单说一下jquery-qrcode，这个开源的三方库（可以从https://github.com/jeromeetienne/jquery-qrcode 获取），
: k' {: C/ t* G
qrcode.js 是实现二维码数据计算的核心类，
& E: t9 {  h' B" R
jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和image、table三种方式）。
# w9 H7 M1 o: P( B& c+ l1 N===============================================
JS生成中文二维码问题：
其实上面的js有一个小小的缺点，就是默认不支持中文。

7 k+ u, q' M0 U* r  }这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，

而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，

( s) {, ^3 L. _- [( h& }英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。
6 O, b: L5 g( M, z" j! X! J
解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：
# n7 L" _0 B+ L8 r% {找到插件中以下代码：
) H# s( b% Y( R- V2 \& {$ f

1. qrcode.stringToBytes = function(s) {
   % m/ f" m5 n  p, o! ~% g" B
2.    var bytes = new Array();
   
3.    for (var i = 0; i < s.length; i += 1) {
   4 r: n+ |, k2 L/ y: B
4.       var c = s.charCodeAt(i);
   
5.       bytes.push(c & 0xff);
   / B5 s* ]8 v! f% V3 m( O2 C8 l
6.    }
   
7.   return bytes;

复制代码

加入中文编码：

1. //中文转换
   
2.                 function utf16to8(str) {  
   
3.                         var out, i, len, c;  
   
4.                         out = "";  
   1 u8 t2 w1 u' t( n( P1 W
5.                         len = str.length;  
   
6.                         for(i = 0; i < len; i++) {  
   " o1 ~8 ~% w* j
7.                         c = str.charCodeAt(i);  
   
8.                         if ((c >= 0x0001) && (c <= 0x007F)) {  
   6 K+ C3 \5 L8 |& [% }3 P* I9 p0 a$ d2 A
9.                                 out += str.charAt(i);  
   
10.                         } else if (c > 0x07FF) {  
    0 f: }# c9 y3 G
11.                                 out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
    # ^: V! t! o' e6 a5 s: n: ?
12.                                 out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
    : H1 e7 h/ d0 ~: c0 A  o
13.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    
14.                         } else {  
    4 E4 k: o/ L9 s: t# M
15.                                 out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
    
16.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    ) x* V6 w# h/ _
17.                         }  
    / m$ g' \& w6 r* m. R
18.                         }  
    ) C! F6 c" I8 e( ]: Y( u
19.                         return out;  
    % s4 W" ~/ a+ `, ~  H9 f6 p. h4 D1 k
20.                 }

复制代码

修改后：

1.         qrcode.stringToBytes = function(s) {
   4 g% H( G8 w6 r- P6 V8 f6 V/ p% L
2.                     s=utf16to8(s);
   : s( O0 ~7 J& p+ L$ R& P7 R, x/ U% E# a+ g
3.                         var bytes = new Array();
   
4.                         for (var i = 0; i < s.length; i += 1) {
   - \) N2 q- t3 P0 h" \' ^' y& |
5.                                 var c = s.charCodeAt(i);
   8 r+ A+ w) T& ?. y* D- C
6.                                 bytes.push(c & 0xff);
   ! G2 z: H6 b& S2 b4 V
7.                         }
   ' G& f. j9 ~! Y
8.                         return bytes;
   7 c/ V% j8 g) W' k
9.                 };

复制代码

中文乱码测试：



( q. z- }$ ~5 w

6 i1 A  ?% [  l0 l1 E# G3 e" t) _
7 E. p: s* t( ]3 l% v% _演示样例：
' i0 h, B$ I# f8 |- q  a
% v# e4 e, @' h) X8 F3 @

3 V3 o* U1 ^) @2 J+ H 百度网盘下载地址.zip (225 Bytes, 下载次数: 4, 售价: 5 IT币)

2015-4-23 17:26 上传

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

1 C1 B! ^" Y0 ^8 G& H3 c
* Z% O4 d2 L  m; g+ Y7 g# O9 n

万蕊科技

不错 功能 很多         

记忆的梗上

终于可以回复了

小星星520

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

贝斯特

  U" K9 w3 a. T8 q7 L- a5 _资源有点让我小激动呢

贝斯特

资源有点让我小激动呢

贝斯特

  E/ Z: u( Q0 R2 B9 P/ W% a: e资源有点让我小激动呢

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多