canvas生成图片后，在image标签展示展示生成的图片在安卓大概率出现黑屏

微信公开课小程序热门讨论关于「canvas生成图片后，在image标签展示展示生成的图片在安卓大概率出现黑屏」的小程序开发问题
补充:canvas生成图片后，在image标签展示展示生成的图片在安卓大概率出现黑屏
展开:当前Bug的表现canvas生成图片后，在image标签展示展示生成的图片在安卓大概率出现黑屏图片的获取都成功了，将canvas组件显示出来发现画的是没有问题的，但是获取的图片展示确实黑色的获取图片的方法已经延时2s预期表现复现路径提供一个最简复现DemovarwidthPercent=thisdatagetSystemInfowindowWidth375;varthat=thisletctx=wxcreateCanvasContext(ewmCanvas);画背景图片letbgimageurl=thatdatasharemsgpicInfopicUrlcanvasgetImageInfo(bgimageurl,function(res){consolelog(图片1,res)ctxsave()ctxdrawImage(respath,0,0,345*widthPercent,255*widthPercent)ctxrestore()画头像leticonimageUrl=thatuserInfoimageUrlcanvasgetImageInfo(iconimageUrl,function(res){consolelog(图片2,res)ctxsave()ctxarc(40*widthPercent,40*widthPercent,20,0,MathPI*2,false);ctxclip();ctxdrawImage(respath,20*widthPercent,20*widthPercent,40*widthPercent,40*widthPercent)ctxrestore()设置昵称ctxsave();ctxsetFontSize(16*widthPercent)ctxsetFillStyle(rgb(255,255,255))ctxfillText(thatuserInfoname,70*widthPercent,46*widthPercent)ctxrestore()设置文字标题ctxsave();ctxsetFontSize(28*widthPercent)ctxsetTextAlign(center)ctxsetFillStyle(rgb(255,255,255))ctxsetShadow(1,1,3,rgba(0,0,0,02))ctxfillText(thatdatasharemsgpicInfotitle,1725*widthPercent,235*widthPercent)ctxrestore()设置底部白色背景ctxsave();ctxbeginPath()ctxrect(0,255*widthPercent,345*widthPercent,90*widthPercent)ctxsetFillStyle(ffffff)ctxfill()ctxrestore()设置二维码varewmImageUrl=thatdatasharemsgpicInfocodeUrlcanvasgetImageInfo(ewmImageUrl,function(res){consolelog(图片3,res)ctxsave()ctxdrawImage(respath,10*widthPercent,260*widthPercent,80*widthPercent,80*widthPercent)ctxrestore()设置顶部说明ctxsave()ctxfont=normalbold18pxsansserif;ctxsetFontSize(18*widthPercent)ctxsetFillStyle(rgb(51,51,51))ctxsetTextAlign(center)ctxfillText(thatdatasharemsgpicInfocodeTitle,98*widthPercent,294*widthPercent)ctxrestore()底部说明ctxsetFontSize(16*widthPercent)ctxsetFillStyle(rgb(102,102,102))ctxfillText(thatdatasharemsgpicInfocodeSubTitle,98*widthPercent,322*widthPercent)ctxdraw(false,function(){setTimeout(function(){canvascanvasToTempFilePath(jpg,ewmCanvas,function(res){wxhideToast()varurl=restempFilePath;if(thatdatashareimageUrl==set){thatdatasharemsgshow=truethatsetData({sharemsg:thatdatasharemsg,shareimageUrl:url,})}else{thatsetData({shareimageUrl:url,})}})},2000)})},function(res){thatdatashareimageUrl==})},function(res){thatdatashareimageUrl==});},function(res){thatdatashareimageUrl==});即速小程序：我们在开发中也有遇到这个问题，解决方法是在每次ctxsave()之前都把包括ctxsave()和接下来的所有步骤全部放入setTimeout内，并且延迟500毫秒：demo的例子是https:developersweixinqqcomsuFp3vjmM7s4J，唯一的不同是我使用的图片是网络的，这个因为账号原因放在了本地，网络图片用的canvasjs中的getImageInfo方法获取，其他的都是一样的这个在安卓机器上都会出现黑图：提供一下出现问题的机型和微信版本，以及能复现问题的简单代码片段（https:developersweixinqqcomminiprogramdevdevtoolsminicodehtml）
更多有关「canvas生成图片后，在image标签展示展示生成的图片在安卓大概率出现黑屏」的讨论可以前往微信公开课小程序参与互动哦！了解更多