最近做项目的时候 客户要求做生成带logo的二维码 并给做个按钮 点击可以下载
本来打算用JSP写 后来网上查了查发现很麻烦 最后找到了这个办法 跟大家分享一下
总结:简单方便 !好用省心!
废话不多说上截图
下面是代码 需要用的两个JS文件分别是:jquery.min.js 和 修改过的 jquery.qrcode.min.js 原版的好像不支持中文和加logo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Qrcode Test</title> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.qrcode.min.js"></script> <script type="text/javascript"> //创建二维码 window.onload=function createQRCode(){ jQuery('#qrcode').qrcode({ render: 'canvas', text: "https://www.baidu.com/", width : "200", //二维码的宽度 height : "200", //二维码的高度 imgWidth : 220/3.5, //图片宽 imgHeight : 220/3.5, //图片高 src: 'img/logo.png' //图片中央的二维码 }); } //下载二维码 function downloadQrcode(){ var canvas = $('#qrcode').find("canvas").get(0); try {//解决IE转base64时缓存不足,canvas转blob下载 var blob = canvas.msToBlob(); navigator.msSaveBlob(blob, 'qrcode.png'); } catch (e) {//如果为其他浏览器,使用base64转码下载 var url = canvas.toDataURL('image/png'); $("#download").attr('href', url).get(0).click(); } return false; }; </script> </head> <body> <div id="qrcode"></div> <a id="download" download="qrcode.png"></a> <input type="button" value="下载" onclick="downloadQrcode()"/> </body> </html>
文件下载 | 文件名称:Qrcode.zip | 文件大小:61.6K |
下载声明:本站资源均来自网络,如有侵权请联系站长删除 | ||
下载地址:https://www.lanzous.com/i27mnmb |