vue qrcode生成二维码base64 图片

在项目中需要使用链接生成二维码合成一张海报,二维码图片是一张base64的图片格式

1.引入 qrcode
import QRCode from "qrcode";

2.html 书写
<div class="qrcode_box">
   <img class="qrcode_canvas"  ref="qrcode_canvas" alt="" :src='qrcodeImage'   />
	<canvas :width="qrSize" :height="qrSize" class="canvas" ref="canvas" ></canvas>
</div>

3. 定义
data() {
  return {
    qrSize: 128,
    qrcodeImage:'',
    bQrUrl:'https://editor.csdn.net/md?articleId=107939047' //链接
  };
}

4.生成
qrcodeToDataUrl() {
  let qrcode_canvas = this.$refs.qrcode_canvas;
  let canvas = this.$refs.canvasImg;
  let bQrUrl=this.bQrUrl;
  const that = this;
  QRCode.toDataURL(
    bQrUrl,
    { errorCorrectionLevel: "H" },
    (err, url) => {
      let qrcode_canvas = new Image();
      qrcode_canvas.crossOrigin = 'anonymous';
      qrcode_canvas.src = url;
      let ctx = canvas.getContext("2d");
      qrcode_canvas.onload = () => {
        let scale = 2;
        canvas.width = that.qrSize*scale;
        canvas.height = that.qrSize*scale;
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, canvas.width , canvas.height );
        ctx.drawImage(qrcode_canvas, 0, 0, canvas.width, canvas.width);
        let cSrc = canvas.toDataURL('image/jpeg');
        that.qrcodeImage = cSrc;
      }
    }
  );
},    

拜托！ 点个赞呗