这里分成两步:
生成二维码
1、使用qrcode.js生成二维码
npm i qrcode --save
2、使用逻辑
<canvas id="merQRCode" style="display: inline-block"></canvas>toMakeQRCode(value) {var qrCodeDom = document.getElementById("merQRCode");QRCode.toCanvas(qrCodeDom,value,{width: 250,},function (error) {});},
这里就已经生成二维码成功了
点击保存按钮下载二维码
1、使用html2canvas下载
npm i html2canvas --save
2、点击保存按钮下载二维码
toSave() {html2canvas(document.getElementById("QRCodeBox")).then(canvas => {let saveUrl = canvas.toDataURL('image/png')let aLink = document.createElement('a')let blob = this.base64ToBlob(saveUrl)let evt = document.createEvent('HTMLEvents')evt.initEvent('click', true, true)aLink.download = '二维码.jpg'aLink.href = URL.createObjectURL(blob)aLink.click()});},
2、把图片转base64
base64ToBlob (code) {let parts = code.split(';base64,')let contentType = parts[0].split(':')[1]let raw = window.atob(parts[1])let rawLength = raw.lengthlet uInt8Array = new Uint8Array(rawLength)for (let i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i)}return new Blob([uInt8Array], {type: contentType})},