微信小程序之画布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生成本地图片所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。