首页 > 教程

jquery-qrcode.js 生成二维码并支持下载到本地

jquery-qrcode.js 引入

1、jQuery生成layer弹出框代码

<div id="qrcode" class="qrcode"></div>
<p class="share_txt">复制链接</p>
<a class="share_download">保存二维码</a>

2、生成二维码的js代码,在点击事件中调用此方法，生成的二维码会以画布标签canvas显示在id="qrcode"的div中

$(function(e) {
   layer.open({
      type: 1,
      title:'分享',
      skin: 'layui-layer-demo', //样式类名
      closeBtn: 0, //不显示关闭按钮
      area:['250px','320px'],
      anim: 2,
      shadeClose: true, //开启遮罩关闭
      content: '<div id="qrcode" class="qrcode"></div><p class="share_txt">复制链接</p><a class="share_download">保存二维码</a>' //支持html，支持页面链接
   });
   if(!$('#qrcode img').length){
      var qrcode = new QRCode(document.getElementById("qrcode"), {
         text: location.href,
         width: 180,
         height: 180,
         colorDark : "#000000",
         colorLight : "#ffffff",
         correctLevel : QRCode.CorrectLevel.H
      });
   }
   var newstr = location.href+'.jpg';
   $('.share_download').attr('download',newstr);//图片名称是当前网址
   var canvas = $('#qrcode').find('canvas').get(0).toDataURL();//获取qrcode二维码
   $('.share_download').attr('href',canvas);
})
//复制分享链接
$(document).on('click', '.share_txt', function() {
   var oInput = document.createElement('input');//创建一个input标签
   oInput.value = location.href;//设置value属性
   document.body.appendChild(oInput);//挂载到body下面
   oInput.select(); // 选择对象
   document.execCommand("Copy"); // 执行浏览器复制命令
   oInput.className = 'oInput';
   oInput.style.display='none';
   layer.msg('链接复制成功！');
});