先上解决代码

canvase导出为图片出现黑色/透明,原因是fileType: 'jpg’导致,将fileType属性设置为png可解决,虽然解决了图片黑色的问题,但是此时导出的图片任然显示空白。
官方说wx.canvasToTempFilePath方法必须放在draw()的回调里面才能保证成功,放在回调函数后导出依然是空白的图片。感觉可能是draw()的第一个参数设置false导致的,设置为true后,再次测试,ios能成功导出图片,但是安卓机测试时,根本不进draw()的回调方法。
去社区查询问题后看到有些说在执行draw()之前先改变一下画布可以解决此问题,尝试一下,加入代码1:this.context.fillStyle=’#ffffff’; 后,安卓和ios都能执行回调并导出图片。
但是发现此时安卓依然存在一个问题,就是导出时偶尔出现导出为空白图片的情况,几率大概为1/4。
经过多次排查调试,得到了最终解决方案,把wx.canvasToTempFilePath放在定时器里面,可完美解决此问题。因为生成图片是异步操作,可能在执行wx.canvasToTempFilePath时,图片还没有生成完,所以此处加定时器延迟执行,为保证图片顺利导出,此处设置为延时1秒比较稳定。
还有一种情况,当canvase上有hidden或wx:if属性时,必须要保证导出图片时,canvase组件处于显示状态,否则此时依然可能会导出为空图片。
博客详细描述了在微信小程序中遇到的Canvase导出图片时出现黑色/透明或者空白的问题。作者发现问题与fileType、draw()的同步异步执行以及canvas的状态有关。通过尝试,最终解决方案是在wx.canvasToTempFilePath方法中使用定时器延迟执行,并确保Canvase组件在导出时可见。此外,安卓设备上仍有可能出现导出空白图片的偶发情况。
287





