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

1安装

npm install qrcodejs2 --save

npm install --save html2canvas

2引包

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

      })

    },