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

最新推荐文章于 2024-04-09 18:59:26 发布

原创最新推荐文章于 2024-04-09 18:59:26 发布 · 753 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #微信小程序canvas

微信小程序专栏收录该内容

6 篇文章

订阅专栏

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

分享也是学习的一种方式