前端生成二维码插件jquery.qrcode.min.js
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端生成二维码插件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", //也可以替换为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运行效果简略如下：有兴趣可以自己尝试一下
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的主要内容，如果未能解决你的问题，请参考以下文章