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

admin

演示地址：http://www.52itstyle.top/qrcode/index.html
3 v" f7 k. v/ S5 N# t1 o. l; k  h

先简单说一下jquery-qrcode，这个开源的三方库（可以从https://github.com/jeromeetienne/jquery-qrcode 获取），
* c" ]) o4 I' _8 v9 E! M7 Q
! n5 _! b4 h0 e3 lqrcode.js 是实现二维码数据计算的核心类，
0 _: M7 T% b& E2 H/ P8 U
jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和image、table三种方式）。
===============================================
JS生成中文二维码问题：
4 ^- O( H' U- s& L* n5 p0 q其实上面的js有一个小小的缺点，就是默认不支持中文。

这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，

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

英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。
( y" w  o  p- f2 a
" p! c, p# M- ]0 N$ K  S解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：
& k/ l/ n1 N8 c+ q找到插件中以下代码：
/ A" ]: c/ z9 s2 _' B8 Q! |9 n

1. qrcode.stringToBytes = function(s) {
   6 b/ b% O# @) A2 p
2.    var bytes = new Array();
   
3.    for (var i = 0; i < s.length; i += 1) {
   6 K! Q5 j3 V. v, h- A& L6 ~8 @3 o7 h
4.       var c = s.charCodeAt(i);
   
5.       bytes.push(c & 0xff);
   
6.    }
   * N  W2 D+ B6 S) l  E  j) R9 ?
7.   return bytes;

复制代码

加入中文编码：

1. //中文转换
   
2.                 function utf16to8(str) {  
   
3.                         var out, i, len, c;  
   7 ^7 n' }8 N0 \( Y% }" P- _. R- i
4.                         out = "";  
   
5.                         len = str.length;  
   # q) r1 B' s1 e9 Q
6.                         for(i = 0; i < len; i++) {  
   
7.                         c = str.charCodeAt(i);  
   
8.                         if ((c >= 0x0001) && (c <= 0x007F)) {  
   
9.                                 out += str.charAt(i);  
   8 }- [# A8 O3 s7 {9 j# \
10.                         } else if (c > 0x07FF) {  
    0 U! O+ `5 g# _3 g6 J
11.                                 out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
    9 t9 G3 G/ [, B3 B. L
12.                                 out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
    
13.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    + a$ M' o& @+ a
14.                         } else {  
    ; s( `' a2 L& G! j1 N# q
15.                                 out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
    
16.                                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    / Q0 I7 W- u0 p
17.                         }  
    
18.                         }  
    # ?7 M$ d# u/ B& }1 O+ ^8 W
19.                         return out;  
    
20.                 }

复制代码

修改后：

1.         qrcode.stringToBytes = function(s) {
   
2.                     s=utf16to8(s);
   
3.                         var bytes = new Array();
   9 |, E  u* |/ R' s
4.                         for (var i = 0; i < s.length; i += 1) {
   0 l3 V5 j  M* I1 J: k
5.                                 var c = s.charCodeAt(i);
   
6.                                 bytes.push(c & 0xff);
   
7.                         }
   
8.                         return bytes;
   
9.                 };

复制代码

中文乱码测试：

' N7 z7 l$ e% t( p. [4 m' B



' a  f& i$ t8 x; G% U$ a
演示样例：


& i" B& W* F1 E8 L9 y2 R9 H- v
百度网盘下载地址.zip (225 Bytes, 下载次数: 4, 售价: 5 IT币)

2015-4-23 17:26 上传

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

, Z) @4 K, [0 ~# V
7 P6 l* @  y, k- S' q

万蕊科技

不错 功能 很多         

记忆的梗上

终于可以回复了

小星星520

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

贝斯特

' Z4 X/ d" h! R( Q. T资源有点让我小激动呢

贝斯特

9 z8 j% p# q1 N2 e; [+ v资源有点让我小激动呢

贝斯特

7 k" f& _9 v" X( V' G* q, k资源有点让我小激动呢

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多   

贝斯特

不错 功能 很多