Vue 实现生成二维码（qrcodejs2），并生成图片（html2canvas）可实现保存和识别

1 引包

npm install qrcodejs2 --save
npm install --save html2canvas

import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2'

1 生成二维码
tip：需要写一个定宽，不然生成图片会发生偏移和二维码不完整

 <div id="qrCode" class="qrconde" ref="qrCodeDiv" v-if="imgData==''" style="width: 200px;height: 200px"></div>

js
生成二维码

  bindQRCode () {
      let t = this
      // console.log(t.userInfo.account)
      new QRCode(this.$refs.qrCodeDiv, {
        // text: 'http://192.168.0.xx:8765/#/SignAgency?code=' + t.userInfo.account,
        width: 200,
        height: 200,
        colorDark: '#333333', // 二维码颜色
        colorLight: '#ffffff', // 二维码背景色
        correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
      })
      this.createPicture() // 二维码生成后，执行生成图片
    },

将二维码生成图片

 createPicture () {
      html2canvas(this.$refs.qrCodeDiv, {
        backgroundColor: null,
        width: 200,
        height: 200
      }).then(canvas => {
        var imgData = canvas.toDataURL('image/jpeg')
        this.imgData = imgData
      })
    },

---

Tips：【小程序云开发】中高级前端面试题库（源码：小程序中联系我哟）。
---------- 创作不易，感谢大家，请多多支持！