先上解决代码
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组件处于显示状态,否则此时依然可能会导出为空图片。