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

admin

$ y6 `( N" ^. T
! K/ C3 _0 z" w% d- O演示地址：http://www.52itstyle.top/qrcode/index.html


* g7 w2 t1 K2 @6 X6 T5 W先简单说一下jquery-qrcode，这个开源的三方库（可以从https://github.com/jeromeetienne/jquery-qrcode 获取），

* B( }: t* R# |+ Xqrcode.js 是实现二维码数据计算的核心类，
+ [0 F* |: }* g% v& Z: N
jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和image、table三种方式）。
===============================================
JS生成中文二维码问题：
其实上面的js有一个小小的缺点，就是默认不支持中文。
$ [* ?3 [$ A) Y& `. B
这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，

0 g7 N$ a3 ]' W% t而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，
8 c' N; s( |  f' @0 Z
& X  |5 V. V% S" L# O' j英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。

解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：
: q  l8 s2 \& s+ J2 X找到插件中以下代码：

1. qrcode.stringToBytes = function(s) {
   
2.    var bytes = new Array();
   3 k4 Q  G7 j4 s) F
3.    for (var i = 0; i < s.length; i += 1) {
   ! e9 A- X$ I5 i3 u3 }+ C
4.       var c = s.charCodeAt(i);
   
5.       bytes.push(c & 0xff);
   % Q, o8 [- G5 Q, u
6.    }
   " w, f- S, E: F* k) |& t
7.   return bytes;

复制代码

加入中文编码：

1. //中文转换
   * D4 V6 h- @7 Q& |& h: I) z
2.                 function utf16to8(str) {  
   
3.                         var out, i, len, c;  
   
4.                         out = "";  
   3 b0 e5 R2 f/ K  V$ E
5.                         len = str.length;  
   6 F6 d$ S% ?  ^1 n  u& l& w
6.                         for(i = 0; i < len; i++) {  
   2 m; r: b' o2 t
7.                         c = str.charCodeAt(i);  
   
8.                         if ((c >= 0x0001) && (c <= 0x007F)) {  
   7 ~2 V( d" B3 _9 [; [+ d) ^
9.                                 out += str.charAt(i);  
   - l# y4 k1 b- ?+ s
10.                         } else if (c > 0x07FF) {  
    , T- h' t, _/ m4 d$ g3 f" V+ C2 [
11.                                 out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
    
12.                                 out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
    ; o! ?. n. X7 Q+ p
13.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    
14.                         } else {  
    % y7 i) U& {3 n6 w) G7 i4 O( ^. |0 G/ e" J
15.                                 out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
    3 V! R* Z; K8 ^! a1 K
16.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    
17.                         }  
    5 [& ^) v4 g6 ^
18.                         }  
    
19.                         return out;  
    * X8 U5 a2 j; l+ W3 ^& B! R
20.                 }

复制代码

修改后：

1.         qrcode.stringToBytes = function(s) {
   # D( h8 e' m% a  |
2.                     s=utf16to8(s);
   - w/ m0 K( n! j# t
3.                         var bytes = new Array();
   2 p# I: l; \$ v; \
4.                         for (var i = 0; i < s.length; i += 1) {
   / E7 K" O3 Z/ W1 V4 M% L3 C6 l/ T
5.                                 var c = s.charCodeAt(i);
   4 P& U3 x5 a' P( n1 q
6.                                 bytes.push(c & 0xff);
   
7.                         }
   
8.                         return bytes;
   
9.                 };

复制代码

中文乱码测试：



. C" {& ?' D9 E) q- M" K4 U3 X+ M$ c

0 W. s! M/ @; s2 h
" h) a! U! x, v( u+ H0 [演示样例：
: c0 j) s1 ~) s& M8 q- @  O$ ^
4 n, r, X( E) ^/ b6 B$ `1 x
; ]% D# D* v6 T- |4 S
6 g* D- v. B7 g2 u" @& l 百度网盘下载地址.zip (225 Bytes, 下载次数: 4, 售价: 5 IT币)

2015-4-23 17:26 上传

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

- h2 h) m" b* z; R5 _4 I

万蕊科技

不错 功能 很多         

记忆的梗上

终于可以回复了

小星星520

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

贝斯特

" D' t% h" h" L/ w4 G资源有点让我小激动呢

贝斯特

资源有点让我小激动呢

贝斯特

资源有点让我小激动呢

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多