微信小程序canvas绘图网络图片下载与promise all的应用

问题:如果海报需要保存到手机的时候我们需要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方法取值绘图

分享也是学习的一种方式

你可能感兴趣的:(微信小程序)