首页 > 代码库 > 前端生成二维码插件jquery.qrcode.min.js
前端生成二维码插件jquery.qrcode.min.js
1.插件介绍
jquery.qrcode.min.js插件是jq系列的基于jq，在引入该插件之前要先引入jq。能够在客户端生成矩阵二维码QRCode 的jquery插件 ，使用它可以很方便的在页面上生成二维条码。
闲话少说，看demo吧！（haha...）
2.快速使用demo
简单介绍：这是一款快速应用案例，没有太特殊的需求的话够用了。鉴于需求，本例是把二维码生成了图片，可以保存到手机，然后发送给好友，直接识别二维码。
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", //也可以替换为table68 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运行效果简略如下：有兴趣可以自己尝试一下
3.用法分析
（1）将jquery.qrcode.min.js和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）设置二维码大小
//生成100*100(宽度100，高度100)的二维码 jQuery(‘#qrcode‘).qrcode({ render : "canvas",//也可以替换为table width : 100,//单位是像素 height : 100, text : "http://www.cnblogs.com/imelemon/p/6677956.html" });
（2）设置二维码颜色
//生成前景色为红色背景色为白色的二维码 jQuery(‘#qrcode‘).qrcode({ render : "canvas",//也可以替换为table foreground: "#C00", background: "#FFF", text : "http://www.cnblogs.com/imelemon/p/6677956.html"7 });
（3）设置二维码生成方式
//使用table/canvas生成 jQuery(‘#qrcode‘).qrcode({ render : "table",//使用canvas生成就设置为 canvas text : "http://www.cnblogs.com/imelemon/p/6677956.html" });
（3）将二维码转成图片格式：
->如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‘));});
注意：二维码如果过长生成的二维码会有问题，建议直接url字符串不要过长150个字符以内；
参考：http://www.jq22.com/jquery-info294
前端生成二维码插件jquery.qrcode.min.js
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。