方法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)
}