vue上用html2canvas.js生成二維碼


方法toImage() 合成圖片的url:
toImage() {
      const that = this
      //需要合成圖片在div內,div設置ref="qrImage",id="qrCapture",即 this.$refs.qrImage可替換document.querySelector('#qrCapture')
      html2canvas(document.querySelector('#qrCapture'), { allowTaint: true, taintTest: true, useCORS: true, logging: true, async: true }).then(canvas => {    
        that.imgUrl = URL.createObjectURL(that.base64ToBlob(canvas.toDataURL()))
        setTimeout(() => {
          this.builded = true
          if (this.imgUrl !== '') {
            that.$message.success({
              message: '海報與轉發文案已經生成,請長按圖片保存並分享到朋友圈,記得粘貼文案哦',
              position: 'middle'
            })
          }
        }, 100)
        // this.$emit('success', this.imgUrl)
        // this.downloadImg()
      })
    }
點擊按鈕跳轉到海報生成頁面,海報生成組件得渲染后顯示在頁面上,即要在mounted上調用方法toImage()。

問題:

 

解決:

mounted() 上延遲調用即可。

mounted() {
    setTimeout(() => {
      this.toImage()
    }, 100)
  }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM