• 参考文章：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
<script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>

  <div id='qrcode'></div>

  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(),构建下载链接并模拟点击，将图片下载到本机

 <div id="qrcode"></div>
 <a id='downloadLink'></a>
<button  onclick="download()">下载</button>

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点击按钮生成二维码图片并下载

<template>
  <div class="home">
    <div class="qrcode">
    </div>
    <button @click='downLoad()'>下载二维码</button>
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
  import QRCode from 'qrcode'
export default {
  data () {
    return {
      url:''
    }
  },
  components:{
    QRCode
  },
  mounted(){
    let _this=this;
    _this.url='https://www.baidu.com'
    let canvas=document.querySelector('#canvas');
      //生成二维码
      QRCode.toCanvas(canvas,_this.url,error=>{
        if(error){
          alert('下载失败')
        }
      })
  },
  methods:{
    downLoad(){
      //下载二维码
      let base64Img=canvas.toDataURL();
      let oA=document.createElement('a');
      oA.href=base64Img;
      oA.download="二维码.png";
      let event=document.createEvent('MouseEvents')
      event.initMouseEvent("click",true,false,window,0,0,0,0,0,false,false,false,false,0,null);
      oA.dispatchEvent(event)
    }
  }
}
</script>

<style scoped>

</style>

• 长按二维码进行跳转

<template>
  <div>
    <div class="qrcode"></div>
    <canvas id="canvas"></canvas>
  </div>
</template>
<script>
import QRCode from 'qrcode';
export default {
  data () {
    return {
      timeOutEvent:0,
      timer:null,
      url:''
    }
  },
  created(){

  },
  mounted(){
    let _this=this;
    let canvas=document.querySelector('#canvas');
    _this.url='https://www.baidu.com';
    QRCode.toCanvas(canvas,_this.url,error=>{
      if(error){
        alert('加载失败')
      }
    })
    _this.touchHref();
  },
  methods:{
    touchHref(){
      let _this=this;

      //pc端长按跳转
      let qrcodes=document.querySelector('#canvas');
      qrcodes.addEventListener('mousedown',(e)=>{
        _this.timeOutEvent=setTimeout(_this.longPress,500);
        e.preventDefault();
      })
      qrcodes.addEventListener('mousemove',(e)=>{
        clearTimeout(_this.timeOutEvent);
        _this.timeOutEvent=0
      })
      qrcodes.addEventListener("mouseup",(e)=>{
        clearTimeout(_this.timeOutEvent);
        clearTimeout(_this.timer);
        if(_this.timeOutEvent!=0){
          console.log('请长按')
        }
        return false;
      })

      //移动端长按跳转
      // qrcodes.addEventListener('touchstart',(e)=>{
      //   _this.timeOutEvent=setTimeout(_this.longPress,500);
      //   e.preventDefault();
      // })
      // qrcodes.addEventListener('touchmove',(e)=>{
      //   clearTimeout(_this.timeOutEvent);
      //   _this.timeOutEvent=0
      // })
      // qrcodes.addEventListener("touchend",(e)=>{
      //   clearTimeout(_this.timeOutEvent);
      //   clearTimeout(_this.timer);
      //   if(_this.timeOutEvent!=0){
      //     console.log('请长按')
      //   }
      //   return false;
      // })
    },
    longPress(){
      let _this=this;
      window.location.href='https://www.baidu.com';
      _this.timer=setTimeout(()=>{},500)
    }
  }
}
</script>

<style lang="css" scoped>
</style>