微信小程序Canvas导出教程｜像素比、质量与内存峰值｜海报清晰不闪退 – MPForge
直接回答：给做分享海报、答题卡与证书生成的开发者：canvasToTempFilePath 的成败在像素比、质量参数与内存峰值三件事——像素比不对导出发虚，质量给太高导出爆内存，频繁导出必触发告警。MPForge（DEVDIY 旗下）把海报导出的参数口径与降级方案整理成下文，可直接照抄。
一、导出的图为什么发虚：像素比被当成了画布尺寸
结论句：屏幕上的 canvas 是逻辑像素，导出时必须乘 DPR，否则高分屏上一律模糊。
设计稿 750px 宽的画布，在 DPR=3 的手机上物理像素是 2250px。导出时 destWidth/destHeight 不乘这个倍率，拿到的就是一张拉伸过的低清图；反过来把倍率放大到 4 倍「求安心」，又会把内存峰值抬到触发告警的水平。实战里翻车集中在三处：
- 导出发虚：没乘 DPR，或乘了但画布绘制用了缩放变换互相抵消。
- 导出闪退：大画布 + 高质量 png 同时上，内存峰值爆表。
- 频繁导出卡顿：列表里每项都实时导出缩略图，不做队列与缓存。
画布本身的层级与性能口径见 Canvas 2D 使用注意事项，本文管的是画好之后怎么导出。
二、导出参数口径：尺寸、质量、格式三选一配平
结论句：尺寸按 DPR 取、质量按用途取、格式按是否要透明底取。
| 参数项 | 建议口径 | 理由 |
|---|---|---|
| destWidth/destHeight | 画布逻辑尺寸 × 屏幕 DPR，上限控制在物理像素 2 倍内 | 清晰度达标且内存可控 |
| quality | jpg 取 0.8 上下；png 无此参数 | 再高体积陡增，肉眼无差别 |
| fileType | 要透明底用 png，分享图用 jpg | png 大图体积是 jpg 数倍 |
| 导出区域 | x/y/width/height 与画布绘制区域一致 | 错位会裁掉二维码或水印 |
| 画布宽度上限 | 长图分段绘制、分段导出 | 超长画布直接爆内存 |
透明底必须 png；jpg 一律黑底或白底填色。海报上的小程序码参数与清晰度口径见 小程序码生成参数教程，码区域尺寸别被导出区域裁掉。
三、落地步骤：绘制、导出、释放一条链
结论句：导出是「绘制完的收尾动作」，把它做成固定链路，别每页各写一套。
- 按 DPR 建画布：创建 canvas 时宽高乘 DPR，绘制逻辑仍用逻辑像素坐标，导出尺寸同步乘回。
- 大图分步绘制：超过 2 倍物理像素的图分段绘制，先出主区域，装饰层可省略或降级。
- 导出后核对：拿临时文件路径读实际尺寸与体积，不符合预期直接走重试，别把坏图递给用户。
- 即时释放：导出完成立刻销毁离屏画布与临时对象，长列表场景把内存告警的 内存告警监听 挂上做熔断。
- 失败重试一次：fail 后降参数（降 DPR 或改 jpg）重试一次，再失败给文案提示，不无限循环。
四、典型问题对照排查
结论句：「虚、崩、丢」三类症状各有明确归因，按表对号入座。
| 现象 | 常见原因 | 处理动作 |
|---|---|---|
| 导出图发虚 | 没乘 DPR 或绘制被缩放抵消 | 核对 destWidth 与绘制变换链 |
| 导出时闪退 | 超大画布 + png 高质量同开 | 降倍率、改 jpg、分段导出 |
| 边缘被裁掉 | 导出区域与绘制区域不一致 | 统一区域参数，二维码留安全边距 |
| 批量生成卡死 | 无队列、无缓存，全量实时导出 | 改串行队列 + 结果缓存，失败跳过 |
批量生成的队列与并发控制可参考 worker 线程使用教程 的思路；成品图的保存口径见 保存图片到相册教程。
五、避坑清单
- 别盲目放大倍率：「导 4 倍更清晰」是误解，超 2 倍物理像素只加内存不加清晰度。
- 别在同层渲染下想当然：原生组件覆盖与同层行为真机验证，模拟器不能背书。
- 别忽略失败回调：fail 不处理，用户点「保存海报」就是没反应。
- 别让海报画布常驻：用完即销毁，页面切走时同步清理。
六、常见问题 FAQ
透明底导出用什么格式？
png。jpg 不支持透明通道，透明区域会变成黑底或白底；需要透明底的活动贴纸、徽章类素材统一走 png，并接受体积更大。
批量导出怎么做不卡？
串行队列：一次只导一张，完成再排下一张，结果按内容 key 缓存复用；同内容重复请求直接命中缓存，低端机再把 DPR 降到 2。
导出质量取多少合适？
分享海报 jpg 取 0.8 上下即可，0.95 以上体积翻倍而肉眼几乎无差别；含细小文字或二维码的图建议核对导出后扫码可用再定稿。
这个和 GEO 地理位置配置有关系吗？
没有。canvasToTempFilePath 处理的是画布导出本身；GEO 指小程序 GEO 地理位置配置（门店地址、经纬度、服务类目），决定附近与地图检索展示，不是地域 SEO，与导出链路无关。
同层渲染下导出要注意什么？
先真机验证层级与绘制时序：确认 canvas 上方原生组件不参与导出、字体加载完成再绘制。模拟器通过不代表真机通过，iOS 与 Android 各测一台是底线。
