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==''" ></div>
js
⽣成⼆维码
bindQRCode () {
let t = this
// console.log(t.userInfo.account)
new QRCode(this.$refs.qrCodeDiv, {
// text: '192.:8765/#/SignAgency?code=' + t.userInfo.account,
width: 200,
height: 200,
colorDark: '#333333', // ⼆维码颜⾊
colorLight: '#ffffff', // ⼆维码背景⾊
correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
})
},
将⼆维码⽣成图⽚
createPicture () {
html2canvas(this.$refs.qrCodeDiv, {
svg和canvas的区别backgroundColor: null,
width: 200,
height: 200
}).then(canvas => {
var imgData = DataURL('image/jpeg')        this.imgData = imgData
})
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。