jquery.qrcode生成二维码

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              200, //宽度 
28             height:200, //高度 
29             text: "www.baidu.com" //任意内容 
30         }); 
31         $("#code2").qrcode({ 
32             render: "canvas", //canvas方式 
33              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>

效果图如下:

原文地址:https://www.cnblogs.com/jiubiubiu/p/6212018.html