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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐