VueはQRコード(qrcodejs 2)の生成を実現し、画像(html 2 canvas)の生成は保存と識別を実現することができる.

1パッケージ

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

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

1 QRコードtipを生成する:一定の幅を書く必要があります.そうしないと、画像を生成するとオフセットとQRコードが不完全になります.

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() //       ，      
    },

QRコードから画像を生成

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