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