功德+1
功德+1
功德+1
效果图
遇到问题
在图片onload中,绘制水印,水印含网络图logo和本地图的图片。在使用**wx.canvasToTempFilePath()**生成图片时,logo和图标大概率会空白
解决方案
如果有网络图,则增加定时器,在onload之后在调用方法wx.canvasToTempFilePath,如果仅有本地图片,则仅增加一定的延迟,再调用即可。
示例代码
if (this.data.logoUrl != "") {
const logoImage = canvas.createImage()
logoImage.src = this.data.logoUrl
logoImage.onload = () => {
this.setData({
isLogoLoaded: true
})
ctx.drawImage(logoImage, canvas_X, canvas_Y, imageWidth,imageHeight)
}
}
this.interval = setInterval(()=>{
if(this.data.isLogoLoaded){
this.setData({
isLogoLoaded: false
})
wx.canvasToTempFilePath({
canvas,
success: (res) => {
wx.hideLoading()
resolve(res.tempFilePath);
},
fail: (err) => {
console.log(err)
wx.hideLoading()
reject(new Error('转换为图片失败'));
}
});
clearInterval(this.interval)
}
},200)