小程序踩坑之安卓 wx.canvasToTempFilePath 导出canvase画布 空白/黑色/透明

博客详细描述了在微信小程序中遇到的Canvase导出图片时出现黑色/透明或者空白的问题。作者发现问题与fileType、draw()的同步异步执行以及canvas的状态有关。通过尝试,最终解决方案是在wx.canvasToTempFilePath方法中使用定时器延迟执行,并确保Canvase组件在导出时可见。此外,安卓设备上仍有可能出现导出空白图片的偶发情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值