首页 > 微信 > 详细

小程序canvas绘图,promise异步处理drawImage()图片无法显示

时间:2021-04-23 16:28:50      阅读:43      评论:0      收藏:0      [点我收藏+]

在小程序海报开发时碰到了canvas的一个小问题:

drawImage()绘制图片无法显示。

CanvasContext.drawImage()在绘制图片,网络图片必须要先通过 getImageInfo / downloadFile 先下载。

这里,drawImage(‘path’)中本地path如何获得异步进程getImageInfo下载后的图片地址?下面需要提前下载获得多个图片路径时就要用到promise异步处理。

 //promise提前封装下载图片1路径
    let promise1 = new Promise(function(resolve, reject) {
      wx.getImageInfo({
        src: 图片1网络地址,,
        success: function(res) {
          resolve(res.path);
        }
      })
    });
//promise提前封装下载图片2路径
    let promise2 = new Promise(function(resolve, reject) {
      wx.getImageInfo({
        src: 图片2网络地址,
        success: function(res) {
          resolve(res.path);
        }
      })
    });
    // all接收数组作为参数, p1 p2 两个返回值,res为数组结构
    Promise.all([promise1,promise2]).then(res=>{
    ctx.drawImage(res[0])
    ctx.drawImage(res[1])
    )}

Promse.all在处理多个异步处理时非常有用!

小程序canvas绘图,promise异步处理drawImage()图片无法显示

原文:https://www.cnblogs.com/hhxing/p/14693435.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!