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

中天 • • 微信开发技术 • 975 阅读

在小程序海报开发时碰到了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

以上是小程序canvas绘图，promise异步处理drawImage()图片无法显示的全部内容。
THE END
分享
二维码
)">
< <上一篇
下一篇>>