微信小程序之画布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);