小程序离屏 Canvas 教程｜createOffscreenCanvas 导出、内存与降级 – MPForge
直接回答：海报导出卡顿甚至闪退，多半是微信小程序离屏 Canvas 用法不对：它适合导出图片和预合成，不适合当普通画布常驻。核心口径是控制分辨率、导完即释放、失败降级到页面 canvas。MPForge（DEVDIY 旗下）在分享海报类项目里按这套口径做，内存告警和「导出后白屏」基本绝迹。
一、什么时候才需要离屏：导出与预合成两个场景
结论句：离屏 Canvas 只解决两件事——把内容导出成图片文件、把复杂图层预合成再上屏；界面动画和常规绘制交给普通 canvas，别为了「看起来高级」上离屏。
典型场景是分享海报：商品图、二维码、文案图层在离屏画布上合成，导出临时文件交给用户保存转发。另一个场景是复杂排版预合成，先在离屏画布把多层内容合成一张，再一次性绘制到页面，减少主画布反复重绘。判断标准很简单：用户要拿走一张图，或渲染链路太重需要预处理，才用离屏；能在页面上直接画的，一律直接画。能通过 CSS 样式实现的效果（圆角、阴影、渐变）也不必动用画布。Canvas 2D 的通用注意事项见 微信小程序 Canvas 2D 使用教程。
还有一个常见误用是把离屏画布当「缓存」常驻内存，整个小程序生命周期挂着，结果页面切换几次就触发内存告警。
二、内存账怎么算：分辨率与释放时机决定生死
结论句：画布内存与边长的平方成正比——边长翻一倍，内存约翻四倍，导出后不释放就是把账一直挂着。
先算账：一张 1080×1920 的画布，按每像素四字节估算，内存约 8MB 量级；如果把边长放大到 2160×3840，直接奔 33MB 去，在低端机上叠加图片解码内存，小程序内存告警处理教程 里讲的被杀风险立刻出现。所以分辨率按导出用途定：保存到相册的海报送 1080 宽档位即可，界面内的预览图按展示尺寸的一半到一倍定，不要无脑按设备像素比放大。
释放口径同样明确：导出完成后立即销毁离屏画布并清空引用，让垃圾回收真正回收内存。多次导出的业务（如批量生成券码图）采用「建、画、导、毁」四步循环，而不是复用一张大画布挂全程。
三、五步落地：从确认需求到真机对比
结论句：按五步走，离屏方案既出得了图，也扛得住低端机，出问题时有明确的退路。
- 确认必须离屏：对照第一节两个场景判断；只是画个角标、画个进度环，直接用页面 canvas，不必引入离屏。
- 按用途定分辨率：导出文件 1080 宽档、页面预览按展示尺寸定，避免按设备像素比无脑放大，画布边长有明确上限。
- 导出后立即释放：导出临时文件成功后销毁画布、清空引用；导出口径与 小程序 Canvas 导出临时文件教程 保持一致。
- 失败降级：低端机先降一档分辨率重试；仍触发内存告警或创建失败，退回页面 canvas 的简化排版方案。
- 真机对比：高端机与低端机各测一轮导出耗时、内存曲线与成图清晰度，用数据确认档位选择。
四、自检表：分辨率、释放与降级逐项核对
结论句：上线前过一遍这张表，四项达标才算离屏方案合格。
| 检查项 | 达标口径 | 常见错误 |
|---|---|---|
| 使用场景 | 仅导出与预合成，界面绘制走页面 canvas | 把离屏当常驻画布画 UI |
| 分辨率 | 按导出用途定档，边长有上限 | 按设备像素比无脑放大，内存爆表 |
| 释放时机 | 导出成功即销毁，多次导出走循环 | 画布常驻，页面切换后内存告警 |
| 降级路径 | 降档重试，最终退回页面 canvas 方案 | 创建失败直接白屏，无任何退路 |
验收现象给商家一个简单判据：在旧安卓机上连续生成五张海报，全程不闪退、第五张与第一张耗时接近，就说明释放链路是通的。
五、避坑清单
这三条坑都出在「贪大」上：图太大、挂太久、退路没留。
- 别把画布当常驻缓存：离屏画布生命周期跟单次导出走，常驻只会把内存账越挂越大，最终触发系统回收。
- 别把离屏用于逐帧动画：动画需要的是页面 canvas 的持续重绘，离屏方案做动画既耗内存又卡帧，慎用。
- 别忽略低端机实测：开发者工具内存表现与真机差距大，在 Worker 等进阶方案评估前，先把降级路径做扎实。
六、常见问题 FAQ
生成分享海报用离屏 Canvas 合适吗？
合适，这是最典型场景：图层多、要导出文件。控制分辨率、导出后释放，再配一档低端机降级方案即可稳定运行。
可以做逐帧动画吗？
不建议。逐帧动画要持续重绘，页面 canvas 更合适；离屏画布做动画内存高、帧率低，属于典型的工具误用。
这个和 GEO 地理位置配置有关系吗？
没有直接关系。离屏 Canvas 是绘制与导出能力；小程序 GEO 地理位置配置是后台的门店地址、经纬度、服务类目设置。若海报里要展示门店位置，GEO 配置的正确性要在后台核对，与画布方案分别验收。
导出报错时用户看到什么？
降级方案兜底：先降一档分辨率重试，仍失败则提供简化版分享图或直接保存商品链接，绝不让流程死在白屏上。
怎么判断内存问题出在画布上？
真机打开性能面板复现「生成海报」操作，观察内存曲线：导出后不回落且逐次抬升，基本可确认释放链路缺失，对照第三节口径整改。
