案例朋友圈分享图 · 一键出竖图
案例详情页一键生成 1080×1920 朋友圈竖图：封面、标题、标签、摘要、技术栈 logo、二维码与可复制文案一体输出。浏览器 Canvas 本地绘制，无需设计软件；为 iPhone 灵动岛预留安全区，保存相册后即可发朋友圈。
适合：要把「实战案例」从站点详情页继续扩散到微信朋友圈的主理人、顾问与产品团队；以及希望用同一套品牌版式批量出图的运营。
构建
- · 纯前端出图，不占服务器渲染队列。
- · 后续同链路复用到「一些分享」UpdateShareImage。
背景与做法
案例页内容完整，但发朋友圈仍要：截长图、拼封面、找 logo、写文案、补链接——版式每次不一样，品牌感碎。外包设计出图又慢又贵，还跟不上案例更新。需要在站点内、点一下就出「可直接发朋友圈」的竖图与配文，且技术栈、封面、二维码与案例 CMS 数据同源，避免二次录入。
- 站点主理人：案例页点「生成朋友圈图片」→ 预览 → 保存/复制文案
- 读者：扫图中二维码回到完整案例
- 运营：统一 9:16 版式与品牌头，批量传播观感一致
本轮范围
已实现
- 01
CaseShareButton 挂在案例详情页，读 CMS 字段即时绘制
- 02
固定画布 1080×1920（一屏 story）；可选 long 长图叙事
- 03
品牌头（圆形 logo + AI狮傅 + slogan）与顶部安全区（约 160px，照顾灵动岛）
- 04
封面 16:10 圆角裁切；CASE 元信息 / 标题 / 标签 / 摘要
- 05
技术栈区：模型 / Skill / 插件 / 终端 logo 网格（SVG 转 data URL）
- 06
页脚二维码指向 /cases/[slug]；一键复制朋友圈文案
- 07
保存图片：下载 PNG；微信内可长按大图存相册
未纳入
- 01
服务端批量出图 / 定时海报任务
- 02
可拖拽改文案的所见即所得编辑器（当前以 CMS 字段为准）
- 03
多主题皮肤与 A/B 版式
界面
关键决策
浏览器 Canvas 本地绘制：零服务成本、隐私友好、改完即预览
一屏竖图优先：适配朋友圈单图，信息密度可控；长图留给完整叙事
顶部安全区宁可多留白：全屏预览/发帖时标题不被灵动岛挡
logo 不直接 draw SVG：先 fetch 注入尺寸再转 data URL，避免 naturalWidth=0 空白
文案与图片解耦：图负责视觉锚点，文案单独复制，符合微信发帖习惯
注意点
MiSans 等可变字重若写标准 400/700，会命中邻近 face 导致「有的字粗有的字细」——需对齐 @font-face 真实 weight
SVG logo 无宽高时 canvas 绘制空白——必须注入 width/height 或 viewBox
跨域图片需 CORS 或同源静态路径，否则 canvas 污染无法 toDataURL
字号过大导致一屏溢出：摘要/标题行数要硬截断并预留页脚
部署后静态 chunk 缓存：分享相关改动需硬刷新或等缓存过期
结果
- 任意 live 案例可在详情页一键出品牌一致的朋友圈竖图
- 封面、技术栈 logo、二维码与 CMS 同源，案例改完再生成即最新
- 同能力已延伸到「一些分享」图文卡（UpdateShareImage），形成站内双入口
- 主理人发帖链路从「截图拼贴」变成「预览 → 保存 → 粘贴文案」
传播素材不必另开设计产线。把「案例 CMS 字段 → 固定竖图模板 → 本地 Canvas 导出」做成站点能力，传播成本接近于零，品牌版式还能随产品迭代一起演进。难的不是画图 API，而是安全区、字体、SVG 与信息密度这些「发到微信才暴露」的细节。