后端生成海报虽稳定，但前端canvas合成不可替代，因其支持动态叠加用户头像、昵称、实时二维码，并保障长按识别、分享带参及个性化能力；需后端提供静态素材，前端动态合成导出。
后端生成海报是更稳的选择，但前端 canvas 合成仍不可替代——尤其在需要动态叠加用户头像、昵称、实时二维码的场景下。 直接让后端吐一张完整图片看似省事，但会丧失「长按识别」「分享带参」「用户个性化」等关键能力。真正可行的方案是：后端提供可复用的静态素材（背景图、基础二维码模板），前端用 canvas 动态合成并导出。
为什么不能全靠后端生成海报
后端生成整张海报图片（比如用 Node + Canvas 或 Python + Pillow）确实能规避跨域、DPR、绘制模糊等问题，但它带来三个硬伤：
-
微信小程序中，
onShareTimeline的imageUrl必须是 HTTPS 网络地址，且不支持带 token 或动态 query（如?uid=123），否则卡片降级为纯文字链接 - 用户头像、昵称等敏感信息若由后端拼入图片，需额外鉴权、缓存、防盗链，复杂度陡增；而前端用
uni.getUserInfo拿到的是已授权数据，更轻量可控 - 长按识别二维码功能依赖前端 canvas 绘制后的
canvas.toTempFilePath生成本地临时路径，后端图无法触发微信原生识别逻辑
canvas.drawImage 加载网络图必须过 downloadFile 这关
H5 和小程序对网络图片处理逻辑完全不同，但共同点是：只要图片域名没配白名单或不支持 CORS，context.drawImage 就会静默失败——不报错、不绘制、不提示。
由于微信的大热，为了更好的方便使用微信的用户查询一些信息，这篇文章是入门级的微信公众平台开发教程，需要的朋友可以参考下 这篇入门教程将引导你完成如下任务： 创建百度云平台应用启用微信公众平台开发模式获取订阅、文字、图片、语音、视频消息回复文本、图文及音乐消息程序开发
- 小程序端：所有网络图（包括背景、头像、二维码）必须先调
uni.downloadFile下载到本地临时路径，再传给drawImage；否则白屏或留空 - H5 端：若图片允许跨域（响应头含
Access-Control-Allow-Origin: *），可用uni.getImageInfo获取宽高后直接绘制；否则必须转 base64（注意 base64 过大会阻塞主线程） - App 端：无需 downloadFile，但需确认图片服务器支持 CORS，否则同样失败
onShareTimeline 的 imageUrl 必须是最终合成图，不是原始素材
很多人把后端返回的“背景图 URL”直接塞进 onShareTimeline 返回对象，结果朋友圈卡片只显示默认图标。这是因为微信要求 imageUrl 是“最终可展示的完整海报”，而非中间资源。
- 正确流程是：canvas 绘制完成 → 调
uni.canvasToTempFilePath生成临时文件 → 用uni.uploadFile上传到你自己的 CDN 或云存储 → 拿到 HTTPS 地址 → 在onShareTimeline中返回该地址 - 不能跳过上传步骤直接用
tempFilePath（本地路径），微信不认；也不能用data:image/png;base64,...（base64 不被支持） - 上传后建议加时间戳或 hash 参数防缓存，例如
https://cdn.example.com/poster_abc123.jpg?t=1745250467
保存和分享按钮要分开处理，别混用 showShareImageMenu
uni.showShareImageMenu 是个“快捷入口”，但它会覆盖页面内自定义按钮行为，且对 path 和 imageUrl 校验更松——容易掩盖真实问题。
- 保存图片：走
uni.saveImageToPhotosAlbum，传 canvas 导出的tempFilePath - 分享到好友：调
uni.share或onShareAppMessage，path 带参数，title 可读 - 分享到朋友圈：必须用
onShareTimeline页面级函数，且三重权限（manifest、pages.json、后台开关）缺一不可 - 不要在按钮里调
showShareImageMenu同时触发保存+分享，它无法区分来源，也无法控制分享卡片内容
最易被忽略的是：canvas 绘制时未适配设备像素比（uni.getSystemInfo 中的 pixelRatio），导致高 DPR 设备上导出图模糊。解决方法不是放大 canvas 宽高，而是创建 canvas 时用 width * pixelRatio 和 height * pixelRatio 设置实际绘制尺寸，再用 CSS 缩放回目标显示大小——这个细节几乎没人提，但直接影响用户是否愿意转发。
