jquery生成二維碼圖片

時間 2019-11-19

原文原文鏈接

1.插件介紹

jquery.qrcode.min.js插件是jq系列的基於jq，在引入該插件以前要先引入jq。可以在客戶端生成矩陣二維碼QRCode 的jquery插件，使用它能夠很方便的在頁面上生成二維條碼。javascript

閒話少說，看demo吧！（haha...）css

2.快速使用demo

簡單介紹：這是一款快速應用案例，沒有太特殊的需求的話夠用了。鑑於需求，本例是把二維碼生成了圖片，能夠保存到手機，而後發送給好友，直接識別二維碼。html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>二維碼分享xx</title>
 6         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 7         <link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css" />
 8         <script src="jquery-1.8.3.min.js"></script>
 9         <script src="jquery.mobile-1.4.5.min.js"></script>
10         <script src="jquery.qrcode.min.js"></script>
11         <style>
12             * {
13                 font-family: "微軟雅黑";
14             }
15             #wxshare {
16                 font-weight: normal;
17                 background: #3d85c6;
18                 border-radius: 5px;
19                 padding: 5px 7px;
20                 color: #fff;
21                 border: none;
22             }
23             .tc {
24                 text-align: center;
25             }
26             
27             .block {
28                 display: block;
29             }
30             .green {
31                 color: #2d7104;
32             }
33             #myPopup small {
34                 padding: 8px;
35                 border-bottom: 1px solid #ccc;
36             }
37             #qrcodeImg {
38                 margin-top: 20px;
39                 padding: 3px;
40                 border: 1px solid #ccc;
41             }
42         </style>
43     </head>
44     <body>
45         <div data-role="page">
46             <div data-role="header" data-theme="b">
47                 <h1>七月</h1>
48             </div>
49             <div data-role="main" class="ui-content">
50                 <a id='wxshare' data-rel="popup" href="#myPopup" class="ui-btn ui-corner-all" data-transition="slidedown"><span>邀請好友</span></a>
51                 <!--彈窗-->
52                 <div data-role="popup" id="myPopup" data-position-to="window" class="ui-content">
53                     <div class='tc'>
54                         <small class="green">長按一下二維碼保存圖片發送給好友</small>
55 
56                         <div id="code"></div>
57                         <img src="" id="qrcodeImg"/><br>
58                     </div>
59                 </div>
60             </div>
61         </div>
62 
63         <script>
64             $(function() {
65                 $('#wxshare').tap(function() {
66                     var qrcode = $('#code').qrcode({
67                         render: "canvas", //也能夠替換爲table
68                         width: 120,
69                         height: 120,
70                         text: "http://www.cnblogs.com/imelemon"/*能夠經過ajax請求動態設置*/
71 
72                     }).hide();
73                     //將生成的二維碼轉換成圖片格式
74                     var canvas = qrcode.find('canvas').get(0);
75                     $('#qrcodeImg').attr('src', canvas.toDataURL('image/jpg'));
76                 });
77 
78             });
79         </script>
80 
81     </body>
82 
83 </html>

demo運行效果簡略以下：有興趣能夠本身嘗試一下java

3.用法分析

（1）將jquery.qrcode.min.js和jquery添加到您的網頁中jquery

1 <script src="jquery-1.8.3.min.js"></script>
2 <script type="text/javascript" src="jquery.qrcode.min.js"></script>


注意：2中demo引入jqueryMobile是爲了樣式和交互效果加的。基本引入這兩個就能夠使用了！

（2）而後要建立一個二維碼的容器：

<div id="code"></div>


（3）加入js在容器中建立二維碼：

<script>
            $(function() {
                $('#wxshare').tap(function() {
                    var qrcode = $('#code').qrcode({
                        render: "canvas", //也能夠替換爲table
                        width: 120,
                        height: 120,
                        text: "http://www.cnblogs.com/imelemon/p/6677956.html"/*能夠經過ajax請求動態設置*/

                    }).hide();
                    //將生成的二維碼轉換成圖片格式
                    var canvas = qrcode.find('canvas').get(0);
                    $('#qrcodeImg').attr('src', canvas.toDataURL('image/jpg'));
                });

            });
        </script>

4.進階用法

（1）設置二維碼大小git

//生成100*100(寬度100，高度100)的二維碼
         jQuery('#qrcode').qrcode({
             render  : "canvas",//也能夠替換爲table
             width   : 100,//單位是像素
             height  : 100,
             text    : "http://www.cnblogs.com/imelemon/p/6677956.html"
         });

（2）設置二維碼顏色github

 //生成前景色爲紅色背景色爲白色的二維碼
 jQuery('#qrcode').qrcode({
     render    : "canvas",//也能夠替換爲table
     foreground: "#C00",
     background: "#FFF",
     text : "http://www.cnblogs.com/imelemon/p/6677956.html"
7 });

（3）設置二維碼生成方式ajax

//使用table/canvas生成
 jQuery('#qrcode').qrcode({
    render  : "table",//使用canvas生成就設置爲 canvas
    text : "http://www.cnblogs.com/imelemon/p/6677956.html"  
});

（3）將二維碼轉成圖片格式：canvas

->如2中demo微信

$('#wxshare').tap(function() {
        var qrcode = $('#code').qrcode({
                render: "canvas", //也能夠替換爲table
                width: 120,
                height: 120,
                text: "http://www.cnblogs.com/imelemon"/*能夠經過ajax請求動態設置*/

}).hide();
        //將生成的二維碼轉換成圖片格式
    var canvas = qrcode.find('canvas').get(0);
    $('#qrcodeImg').attr('src', canvas.toDataURL('image/jpg'));
});