微信小程序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方法取值绘图

分享也是学习的一种方式

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值