问题:如果海报需要保存到手机的时候我们需要canvas绘图实现,然而许多网络图片需要本地下载之后才可以保存到手机,官方提供的downloadFile方法虽然可以在成功的回调中依次下载多张图片,但是当图片太多时候难免会造成回调地狱,造成代码可读性不强,代码臃肿的问题,这时候就需要用的promise all的方法来优化,上代码:
let bgimg = new Promise((resolve,reject)=>{
wx.downloadFile({
url: 'xxxx', // 下载资源的 url
success: res => {
resolve(res.tempFilePath) //背景图
},
});
})
let headerImg = new Promise((resolve,reject)=>{
wx.downloadFile({
url: xxx,
success: res=>{
resolve(res.tempFilePath) //头像
},
});
})
Promise.all([bgimg,headerImg]).then(result => {
context.drawImage(result[0], 0,0, me.data.WIDTH * 0.92, me.data.height * 0.87) //背景图片
context.drawImage(result[1], me.data.height * 0.22,me.data.WIDTH * 0.41,me.data.WIDTH * 0.16, me.data.height * 0.1) //用户头像
}
通过promise all的方法返回头像和背景图的实例(也就是临时路径),通过result方法取值绘图
分享也是学习的一种方式