首页 > Web开发 > 详细

vue上用html2canvas.js生成二维码

时间:2020-02-05 19:07:52      阅读:126      评论:0      收藏:0      [点我收藏+]
方法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)
  }

 

vue上用html2canvas.js生成二维码

原文:https://www.cnblogs.com/CXbbuhui/p/12264715.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!