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