QRCode、html2canvas，将QRCode生成的二维码转canvas，再将canvas转base64，通过点击下载图片

1、生成二维码

npm install qrcodejs2 --save

// demo3.vue



import QRCode from "qrcodejs2";

mounted() {
  this.getQRCode();
},

methods: {
	getQRCode() {
	      let qrcode = new QRCode("qrcode", {
	        width: 161,
	        height: 162,
	        text: "www.baidu.com",
	        colorDark: "#ffff",
	        colorLight: "#baf",
	      });
	}
}

2、利用html2canvas，将dom元素转成canvas; 点击下载

npm install --save html2canvas

// demo3.vue

import html2canvas from "html2canvas";

getQRCode() {
  let qrcode = new QRCode("qrcode", {
    width: 161,
    height: 162,
    text: "www.baidu.com",
    colorDark: "#ffff",
    colorLight: "#baf",
  });

  html2canvas(document.querySelector("#qrcode"), {
    width: 161,
    height: 162,
    allowTaint: true,
    useCORS: true,
  }).then((canvas) => {
    this.url = canvas.toDataURL();
    console.log(this.url,'url');
  });
},	

downImg() {
  var a = document.createElement("a");
  a.href = this.url;
  a.download = "tt";  //设置文件名
  a.style.display = "none"; // 障眼法藏起来a标签
  document.getElementsByClassName("demo3")[0].appendChild(a);
  a.click()  // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
  a.remove(); // 一次性的，用完就删除a标签

  //将 #qrcode 的内容置空
  // const codehtml = document.getElementById("qrcode");
  // codehtml.innerHTML = "";
},

遇到html2canvas的坑可参考： https://www.jianshu.com/p/e74dab30ea2c