vue使用html2canvas生成并下载图片，图片模糊问题

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