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