vue生成二维码，点击下载

生成二维码   npm install qrcodejs2 --save
生成图片链接供下载   npm install --save html2canvas

<button @click="qrcode">点击生成二维码</button>
<button @click="getPic">点击下载图片</button>
      
<div
  id="qrcode"
  ref="qrcode"></div>
  
<img
  :src="imgUrl"
  style="width: 400px;height: 400px;display:none;"
  ref="qrcodeImg"
  class="qrcodeImg"
  id="qrcodeImg" />

import QRCode from 'qrcodejs2' // 生成二维码   npm install qrcodejs2 --save
import html2canvas from 'html2canvas' // 生成图片 npm install --save html2canvas

qrcode() { // 生成二维码
  let qrcode = new QRCode('qrcode', {
      width: 200, // 设置宽度，单位像素
      height: 200, // 设置高度，单位像素
      text: 'https://www.baidu.com' // 设置二维码内容或跳转地址
  })
},
downloadIamge() { // 下载图片
  let iconUrl = document.getElementById('qrcodeImg').src
    //下载图片地址和图片名
    let image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute('crossOrigin', 'anonymous');
    image.onload = function() {
        let canvas = document.createElement('canvas');
        canvas.width = '400';
        canvas.height = '400';
        let context = canvas.getContext('2d');
        context.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL('image/png'); //得到图片的base64编码数据'
        let a = document.createElement('a'); // 生成一个a元素
        let event = new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
        }); // 创建一个单击事件
        a.download = 'photo'; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
    };
    image.src = iconUrl;
},
getPic() { // 生成图片链接
  html2canvas(document.getElementById('qrcode'), {
      scale: 2, //缩放比例,默认为1
      allowTaint: false, //是否允许跨域图像污染画布
      useCORS: true, //是否尝试使用CORS从服务器加载图像
      width: '500', //画布的宽度
      height: '500', //画布的高度
      backgroundColor: '#fff', //画布的背景色，默认为透明
  }).then((canvas) => {
      //将canvas转为base64格式，生成图片链接
      this.imgUrl  = canvas.toDataURL('image/png');
      setTimeout(()=> {
        this.downloadIamge();
      }, 300)
      
  })
},