<div class="qr_code_bottom" ref="imageWrapper">
<img src="../../assets/images/xiazai.jpg" style="width: 400px" alt="" />
<img :src="qrcodeSrc" class="qrcode" width="200" />
<img :src="userHeaderSrc" class="user_header" style="width: 50px; height: 50px" alt="" />
</div>
downLoadImage(){
this.frequentlyToastShow = true;
this.toastHide = this.$message.loading("正在生成下载操作", 0);
const canvas = document.createElement("canvas")
let canvasBox = this.$refs.imageWrapper
const width = parseInt(window.getComputedStyle(canvasBox).width)
const height = parseInt(window.getComputedStyle(canvasBox).height)
console.log('宽为---',width,'--高为--',height);
// 宽高 放大N倍 是为了防止图片模糊
canvas.width = width * 4.125
canvas.height = height * 4.126
canvas.style.width = width + 'px'
canvas.style.height = height + 'px'
const context = canvas.getContext("2d");
context.scale(4.125, 4.126);
const options = {
backgroundColor: null,
canvas: canvas,
useCORS: true
}
html2canvas(canvasBox, options).then((canvas) => {
this.frequentlyToastShow = false;
setTimeout(this.toastHide, 0);
let dataURL = canvas.toDataURL("image/png")
if (dataURL !== "") {
let a = document.createElement('a')
a.href = dataURL
a.download = '商户收款二维码'
a.click()
this.qrCodeShow = false;
}
})
},
