在小程序海报开发时碰到了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在处理多个异步处理时非常有用!