html,vue生成二维码进行跳转，下载和长按跳转

• 参考文章：https://www.jianshu.com/p/a301cd16f153

• 二维码的生成

1.qrcode.js和jquery-qrcode.js生成二维码
2.两者之间的区别：
（1）qrcode .js生成的是深色和浅色的二维码
（2）jquery-qrcode.js生成的是黑白的二维码
（3）qrcode.js支持clear()清除二维码和makecode()更换二维码的方法，jquery-qrcode.js不支持

• qrcode.js的参数说明：

• html生成qrcode.js的二维码，点击二维码可以刷新

//引入qrcode.js

  function fn(){
   let s=[];
   let str='01234567890abcdef'
   for(let i=0;i<36;i++){
      s[i]=str.substr(Math.floor(Math.random()*0x10),1)
    } 
   s[14]='4';
   s[19]=str.substr((s[19]&0x3) |0x8,1)
   s[8]=s[13]=s[18]=s[23]="";
    var uuid=s.join("")
    return uuid
  }

  var QRcode=document.querySelector("#qrcode");
  //点击二维码刷新
  QRcode.onclick=function(){
    var uuid=fn();
    qrcode.makeCode("https://www.baidu.com?uuid="+uuid);
  }

  //设置二维码的配置信息
  var qrcode=new QRCode(QRcode,{
    text:"https://www.baidu.com?uuid="+uuid,
    width:200,
    height:200,
    colorDark:"#000",  //生成二维码的深色部分
    colorLight:"#fff"  //生成二维码的浅色部分
})

• 点击按钮将生成的二维码保存到本地

实现原理：将base64编码格式的图片转化为canvas画布，利用toDataUrl()方法将canvas画布信息转化为可供下载的url信息toDataUrl(),构建下载链接并模拟点击，将图片下载到本机

 

 
下载

var qrcodes=document.querySelector("#qrcode");
let qrcode=new QRCode(qrcodes,{
  text:'https://www.baidu.com',
  width:200,
  height:200,
  colorDark:"#000",
  colorLight:"#fff"
})
function download(){
  let qrcodeImg=document.getElementById("qrcode").getElementByTagName("img")[0];
  let canvas=document.createElement("canvas");
  canvas.width=qrcodeImg.width;
  canvas.height=qrcodeImg.height;
  //将canvas转为二维渲染上下文，并将canvas转化为绘制图片
  canvas.getContext("2d").drawImage(qrcodeImg,0,0);
  //将canvas画布信息转化为url
   url=canvas.toDataURL();
  let downLoadLink=document.querySelector("#downloadLink');
  downLoadLink.setAttribute("href",url);
  downLoadLink.setAttribute("download","二维码.png");
  downLoadLink.click();
}

• vue点击按钮生成二维码图片并下载

• 长按二维码进行跳转