首页 > 代码库 > jquery.qrcode生成二维码

jquery.qrcode生成二维码

2024-08-28 17:40:12   217人阅读

qrcode其实是通过使用jQuery实现图形渲染，画图，支持canvas（HTML5）和table两种方式，github地址：https://github.com/jeromeetienne/jquery-qrcode

以下是demo：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Qrcode demo</title>
 6    
 7     <!-- Demo styles -->
 8     <style>
 9     
10     </style>
11 </head>
12 <body>
13     
14     <!-- Qrcode JS -->
15     <script src="./jquery-1.10.2.min.js"></script>
16     <script src="./jquery.qrcode.min.js"></script>
17 
18 
19     <div id="code"></div> <br>
20     <div id="code1"></div> <br>
21     <div id="code2"></div> 
22     <!-- Initialize Qrcode -->
23     <script>
24         $(‘#code‘).qrcode("http://www.baidu.com"); //任意字符串 
25         $("#code1").qrcode({ 
26             render: "table", //table方式 
27             width: 200, //宽度 
28             height:200, //高度 
29             text: "www.baidu.com" //任意内容 
30         }); 
31         $("#code2").qrcode({ 
32             render: "canvas", //canvas方式 
33             width: 200, //宽度 
34             height:200, //高度 
35             text: "www.baidu.com" //任意内容 
36         }); 
37 
38         /**
39         *   其实上面的js有一个小小的缺点，就是默认不支持中文。
40 
41 这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，
42 
43 而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，
44 
45 英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。
46 
47 解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：
48         */
49         function utf16to8(str) {  
50             var out, i, len, c;  
51             out = "";  
52             len = str.length;  
53             for(i = 0; i < len; i++) {  
54             c = str.charCodeAt(i);  
55             if ((c >= 0x0001) && (c <= 0x007F)) {  
56                 out += str.charAt(i);  
57             } else if (c > 0x07FF) {  
58                 out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
59                 out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
60                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
61             } else {  
62                 out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
63                 out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
64             }  
65             }  
66             return out;  
67 }  
68     </script>
69 </body>
70 </html>

效果图如下：

技术分享

 

jquery.qrcode生成二维码


联系
我们