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

admin

0 I) W( ^2 @3 J) P3 z$ E
演示地址：http://www.52itstyle.top/qrcode/index.html
" t8 A4 R( f( o" ^+ s# J

& R/ U1 H+ A% g! _% Y% r4 c先简单说一下jquery-qrcode，这个开源的三方库（可以从https://github.com/jeromeetienne/jquery-qrcode 获取），
5 F1 O) b* K- R: u3 a2 M  t
  u. k) T7 P1 x8 Iqrcode.js 是实现二维码数据计算的核心类，
1 g" y1 p/ E4 F
jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和image、table三种方式）。
) J4 e! V1 x1 M===============================================
: k1 \+ x8 w$ bJS生成中文二维码问题：
, f/ |7 J+ Q) E0 W' a其实上面的js有一个小小的缺点，就是默认不支持中文。
. H6 R* `0 b5 f2 v% I
! }$ {. ^5 \6 E7 C这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，
# A) b/ _& S2 F+ [
6 K6 b! ]+ L, o% F' O2 r8 Q; a) F: P而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，

英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。

解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：
) L% e* g6 P2 d# `! Z5 q5 o找到插件中以下代码：
0 e4 H# E5 ~# D* R' _3 N

1. qrcode.stringToBytes = function(s) {
   # u) Z' m. F3 W' u) o9 O* A" k7 X' a
2.    var bytes = new Array();
   + K7 a' o% p3 v5 l7 w
3.    for (var i = 0; i < s.length; i += 1) {
   ( t4 A: i$ L; U! e3 |/ l( m
4.       var c = s.charCodeAt(i);
   
5.       bytes.push(c & 0xff);
   
6.    }
   " A, Z0 H3 D; b+ T) P
7.   return bytes;

复制代码

加入中文编码：

1. //中文转换
   1 u# R: @2 \( R. h2 m- [
2.                 function utf16to8(str) {  
   
3.                         var out, i, len, c;  
   
4.                         out = "";  
   
5.                         len = str.length;  
   , ?* w, b1 ]7 K$ S; D9 e, }% u
6.                         for(i = 0; i < len; i++) {  
   $ i$ Z" s  D+ \/ s% q
7.                         c = str.charCodeAt(i);  
   
8.                         if ((c >= 0x0001) && (c <= 0x007F)) {  
   & ^! |' T1 _' E2 i) g
9.                                 out += str.charAt(i);  
   ; g+ c( W) Q0 j5 T# G. a2 q
10.                         } else if (c > 0x07FF) {  
    1 [( G3 z+ ~' T$ B. K) X3 }/ p! _
11.                                 out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
    , ~9 O% F6 |3 k2 q
12.                                 out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
    
13.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    ! x2 z+ P  H5 h: e
14.                         } else {  
    
15.                                 out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
    : W* Z' R! w9 V
16.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    
17.                         }  
    
18.                         }  
    ' L* z& G* r  d2 F- J9 F+ y* F' @! B
19.                         return out;  
    / D$ b4 ?3 w8 A; A& U& R
20.                 }

复制代码

修改后：
" h/ _% v' J. Y

1.         qrcode.stringToBytes = function(s) {
   0 R2 }, z8 U$ C& u! K# U
2.                     s=utf16to8(s);
   0 N& i1 s4 H  h
3.                         var bytes = new Array();
   
4.                         for (var i = 0; i < s.length; i += 1) {
   0 U$ @5 t# M# u9 H4 ]( x
5.                                 var c = s.charCodeAt(i);
   
6.                                 bytes.push(c & 0xff);
   
7.                         }
   9 ^6 _. w. m. D1 N9 @
8.                         return bytes;
   5 n0 f0 m& I6 |  M) Q$ C, R
9.                 };

复制代码

中文乱码测试：
0 \* N6 h1 Q0 T& `
+ X  N  @9 g- ?# H. C* Y* U




演示样例：

5 r6 B% o. z5 g. s$ f( v. m

: \; ~6 ~5 e' C- U7 X 百度网盘下载地址.zip (225 Bytes, 下载次数: 4, 售价: 5 IT币)

2015-4-23 17:26 上传

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

( ~1 U, c  {) P+ x4 [

万蕊科技

不错 功能 很多         

记忆的梗上

终于可以回复了

小星星520

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

贝斯特

' H1 K* _1 U3 a  S资源有点让我小激动呢

贝斯特

: O: P* e7 {6 _7 J$ I资源有点让我小激动呢

贝斯特

资源有点让我小激动呢

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多