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

admin

/ l4 h9 ^3 E3 R. B
演示地址：http://www.52itstyle.top/qrcode/index.html

" h& p/ C9 S/ z1 d! m/ [
先简单说一下jquery-qrcode，这个开源的三方库（可以从https://github.com/jeromeetienne/jquery-qrcode 获取），

% x7 ^2 _0 n( o5 M( U$ D8 Dqrcode.js 是实现二维码数据计算的核心类，
6 O, ?' N5 {  _$ u# Y& n- }; Z+ {
jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和image、table三种方式）。
' g2 y, g. Z5 P8 [, {1 H& @===============================================
8 n5 V! K3 j% pJS生成中文二维码问题：
其实上面的js有一个小小的缺点，就是默认不支持中文。
; x# G( U* ?( |7 C+ l
* @; f( }: d: f/ U4 A3 m! X这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，

而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，
/ q; g/ W) v* v' Q0 k, b: {
& V+ Y. d  s/ U' g5 _2 V英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。

+ _8 p8 z5 b" n8 f+ N! c; s# I1 b1 T解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：
5 z) L' L2 l  }4 ]4 j; E& e找到插件中以下代码：

1. qrcode.stringToBytes = function(s) {
   
2.    var bytes = new Array();
   5 Q* j7 z/ T2 }  d- t
3.    for (var i = 0; i < s.length; i += 1) {
   
4.       var c = s.charCodeAt(i);
   
5.       bytes.push(c & 0xff);
   
6.    }
   
7.   return bytes;

复制代码

加入中文编码：

1. //中文转换
   " y9 X/ A  ~* k# r9 H
2.                 function utf16to8(str) {  
   : F0 w$ _# f( i. M& j
3.                         var out, i, len, c;  
     `% j( \7 B* R( T
4.                         out = "";  
   
5.                         len = str.length;  
   
6.                         for(i = 0; i < len; i++) {  
   - ]' F% z  \  q, R0 d! G" f$ m8 [
7.                         c = str.charCodeAt(i);  
     G2 o# K) ?3 y
8.                         if ((c >= 0x0001) && (c <= 0x007F)) {  
   
9.                                 out += str.charAt(i);  
   
10.                         } else if (c > 0x07FF) {  
    ; l) y) u4 P0 V- Z! x8 R* P' z
11.                                 out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
    
12.                                 out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
    7 B8 J, K- m8 _" }( B
13.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    
14.                         } else {  
    & ]. g: w/ }# Q, k! f, l5 [& T
15.                                 out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
    
16.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    : s& ^9 h7 t" d  V/ o: [' p2 u
17.                         }  
    
18.                         }  
    ; x. ~: n) R7 }9 O: |- |" _
19.                         return out;  
    1 y. \1 M8 U' d0 r0 l) ^/ p5 Q, t
20.                 }

复制代码

修改后：
7 J1 w# S! t, ~% S

1.         qrcode.stringToBytes = function(s) {
   # V; o9 m2 D+ ?! L3 Z
2.                     s=utf16to8(s);
   6 J8 F6 [  T0 p# Q
3.                         var bytes = new Array();
   , }3 B1 F/ C, @1 `2 e
4.                         for (var i = 0; i < s.length; i += 1) {
   & w' x; _8 ~+ G( U
5.                                 var c = s.charCodeAt(i);
   # @- v/ c) D1 l3 A7 f8 h* A
6.                                 bytes.push(c & 0xff);
   ( _5 h6 k; [& i
7.                         }
   
8.                         return bytes;
   
9.                 };

复制代码

中文乱码测试：
# P! H. u; T6 b" H; ~
( R6 b0 R; U/ f( f( F  v
8 C  m: P5 h$ w7 d# G( C) u# y



! s/ V4 `+ n* z/ Z演示样例：

' K' \& E% l( G, I% M$ z
/ V: F9 o$ K9 p- V+ D- J; ]; O
百度网盘下载地址.zip (225 Bytes, 下载次数: 4, 售价: 5 IT币)

2015-4-23 17:26 上传

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

0 X) Z& z  h& U# a7 Z

万蕊科技

不错 功能 很多         

记忆的梗上

终于可以回复了

小星星520

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

贝斯特

+ E% t. J- N3 Y/ y/ ]资源有点让我小激动呢

贝斯特

' t( J& z  h" B8 {6 E( S* n' H2 Y+ [资源有点让我小激动呢

贝斯特

资源有点让我小激动呢

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多