vue使用qrcodejs2生成二维码以及添加中心logo

废话不多说，直接上代码

1、安装qrcodejs2

npm install qrcodejs2 --save

2、引入使用

import QRCode from 'qrcodejs2'

3、使用

代码案例

this.$nextTick(() => {
  //创建一个div，用来生成二维码
  let div = document.createElement('div');
  let qrcode = new QRCode(div, {
    text: updataUrl,
    width: 150, //图像宽度
    height: 150, //图像高度
    colorDark: "#000000", //前景色
    colorLight: "#ffffff", //背景色
    typeNumber: 4,
    correctLevel:QRCode.CorrectLevel.H
  })

  let logo = new Image();
  logo.crossOrigin = 'Anonymous';
  logo.src = require("../../assets/favicon.jpg")
  //生成log图片
  logo.onload =() =>{
    let container = this.$refs.code;
    //获取页面上的div,可以document.querySelector()等等方法
    if(container.innerHTML != ''){
      //获取页面div，有则清除
      container.innerHTML ='';
    };
    //获取二维码
    let qrImg = qrcode._el.getElementsByTagName('img')[0];
    //获取canvas
    let canvas = qrcode._el.getElementsByTagName('canvas')[0];
    console.log('qrImg---',updataUrl)
    let cxt = canvas.getContext('2d');

    //写入logo
    cxt.drawImage(logo,150*0.5 - 22,150*0.5 - 22,44,44);
    qrImg.src = canvas.toDataURL();
    container.appendChild(qrcode._el)

  }

  qrcode.clear() //清除二维码
  qrcode.makeCode(updataUrl) //生成另一个新的二维码
})