如题,在画布上绘制图片后通过 `toDataURL` 导出 base64 字符串,多次操作后会导致内存不足,闪退。
以我的手机为例:
型号: iPhone 12 mini,iOS 16.2
操作1:
- 关闭‘使用缓存的离屏画布树’开关
- 打开‘绘制大图片’开关
- 点击‘添加绘图器’按钮多次(30次以上)
- 小程序闪退提示内存不足或者微信闪退
操作2:
- 打开‘使用缓存的离屏画布树’开关
- 打开‘绘制大图片’开关
- 点击‘添加绘图器’按钮多次(30次以上)
- 小程序闪退提示内存不足或者微信闪退
操作3:
- 打开‘使用缓存的离屏画布树’开关
- 打开‘绘制大图片’开关
- 点击‘添加绘图器’按钮多次(10次以上)
- 点击‘绘制器重绘'按钮多次,使‘绘制次数’超过30次
- 小程序闪退提示内存不足或者微信闪退
操作4:
- 打开‘使用缓存的离屏画布树’开关
- 关闭‘绘制大图片’开关
- 点击‘要插入的绘图器数’,输入‘100’
- 点击‘添加绘图器’按钮2次,使‘绘图器数量’为200
- 点击‘绘制器重绘'按钮多次,使‘绘制次数’超过2000次
- 小程序依旧正常
以上的几个操作主要控制的变量为‘离屏画布的数量’和‘绘制图片的大小’,可以发现当离屏画布增多或者绘制图片大(320kb)时,程序在有限的绘制次数后就会崩溃。而绘制图片相对小(90kb)时,即使绘制次数达到2000也不会出现崩溃。
个人认为值得怀疑的目标是 `offscreenCanvas.toDataURL` 、 `offscreenCanvas.createImage`、`offscreenCanvas.drawImage`,似乎这两个方法返回的对象都没有及时被 GC。
如果这确实是一个 Bug 但短期无法修复的话,有没有任何方法可能手动回这些内存呢?
应该是重复创建了离屏canvas,每次点击都会执行wx.createOffscreenCanvas;
const canvas = wx.createOffscreenCanvas({ type: '2d' }); 定义一次就行了;
期望的还是函数执行完后,在函数上下文中分配的内存都能够被释放。
补充一些可能关联的帖子:
页面加载时定义canvas一次,并保存ctx,在点击事件中调用ctx绘制
能帮我邀请官方来解答一下吗?
个人认为还是你写法上存在问题
canvas画布为什么要建那么多个?一个就够了,CTX绘制的内容会一直叠加,使用JS数组存储这个过程,重新绘制只需要清除画布即可