微信小程序之画布drawImage和settimeout生成本地图片

微信小程序开发中会碰到wx.getImageInfo异步加载的问题，图片未加载完成的话会导致ctx.drawImage()画空。发现利用settimeout这个函数全部生成好之后再放到页面显示，这样既不影响页面显示也不受wx.getImageInfo异步加载问题。

1.首先后台请求回来数组dataList中包含图片的网络地址，默认为imgUrl;

2.

var this=that;
var dataList=json.data;
var imgPath = [];//存放本地生成图片的地址数组
that.setData({
isShow: false//控制页面显示
});
var i = 0;
var timer=setTimeout(function(){
var data=dataList[i];
if(i<dataList.length){
var imgUrl=data.imgUrl;
var timerThat=this;//定时器函数
wx.getImageInfo({
src: imgUrl,
success: function(res) {
imgPath.push({
path: res.path,
width: res.width,
height: res.height
});
i++;
timer = setTimeout(timeThat, 50);
}
});
} else {
that.setData({
imgPath: imgPath,
isShow: true
});
clearTimeout(timer);
}
}
},50);

最后

以上就是尊敬高山最近收集整理的关于微信小程序之画布drawImage和settimeout生成本地图片的全部内容，更多相关微信小程序之画布drawImage和settimeout生成本地图片内容请搜索靠谱客的其他文章。