vue实现生成二维码，并生成图片

vue实现生成二维码，并生成图片

1、安装插件
npm install qrcodejs2 --save
npm install --save html2canvas

2、导包
import html2canvas from ‘html2canvas’
import QRCode from ‘qrcodejs2’

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

js
生成二维码
bindQRCode(){
new QRCode(this.$refs.qrCodeDiv,{
//text:‘http://192.168.1.1:8088//kitchen/dishgroup?stage_id=’ + this.stageNum,
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
})
}