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
})
},