uni-app中 canvas插入图片--图片保存空白

使用uni-app做混合APP时，需要用canvas生成海报。遇到问题，第一次保存底部是黑色的，第二次保存出来是全部空白。

因为初次保存图片，背景透明，保存到安卓手机个别型号底部是黑色的，为了解决这个问题，用了一张白色图片，覆盖了整个海报的底色。

 

            最终效果图          

覆盖了白色底之后，黑色底部这个问题解决了，但是因为图片加载顺序的问题，有时二维码也会被底部白色图片覆盖，导致保存到手机上最后只有一张白色图片。

为了解决这个问题，需要等图片加载完成之后再去进行canvas绘制。

但是 new Image( ) 方法在uni-app上不被支持，无效。所以图片onlad方法也不行。

最后采用了 uni.getImageInfo 方法，获取图片信息，当然该方法肯定是等图片加载完成之后才能获取到图片信息。确保不会导致vanvas在绘制的时候图片之间加载顺序不同而覆盖了其他图片。

但是在使用 uni.getImageInfo 方法时又遇到一个很坑的问题，我的海报上有多张图片，循环中去调用该方法报错了。。。

所以目前只能一个嵌套一个，我的海报中目前有四张图片，所以我嵌套了四遍，效果出来了没错，但是感觉有点不爽，相同代码写了四遍。

uni.getImageInfo({
	src: white_img,
	success(res1) {
        //填充白色背景图片
		context.drawImage(white_img, 0, 0, 300 * that.width_view, 445 * that.width_view); 
		uni.getImageInfo({
		  src: image,
	      success(res2) {
            //填充商品图片
			context.drawImage(image, 0, 0, 300 * that.width_view, 300 * that.width_view); 
			 uni.getImageInfo({
    		   src: ercode_img,
		       success(res3) {
                  //填充二维码
			     context.drawImage(ercode_img, 16 * that.width_view, 370 * that.width_view, 50 * that.width_view,50 * that.width_view);
				  uni.getImageInfo({
					src: jia_img,
					success(res4) {
                    //填充图标
					context.drawImage(jia_img, 234 * that.width_view, 370 * that.width_view, 50 * that.width_view,50 * that.width_view); 
					context.setFontSize(15)
					context.fillStyle = '#e30b48'; //颜色
					context.fillText(old_price, 224 * that.width_view, 340 * that.width_view)
					context.setFontSize(13)
					context.fillStyle = '#999999'; //颜色
					context.fillText(new_name, 16 * that.width_view, 340 * that.width_view)											            
                    context.fillText(new_name_one, 16 * that.width_view, 335 * that.width_view)
	            	context.fillText(new_name_two, 16 * that.width_view, 355 * that.width_view)
    				context.fillText(des_one, 76 * that.width_view, 388 * that.width_view)
	                context.fillText(des_two, 76 * that.width_view, 412 * that.width_view)
					context.stroke()
					context.draw()
					},
				fail() {
				  console.log("fail");
			    }
			});
		},
	    fail() {
	   console.log("fail");
	   }
	  });
	  },
	  fail() {
    	console.log("fail");
	   }
	 });
	},
	fail() {
    	console.log("fail");
	}
});