AI 校园写真自助机
把摄像头拍照、AI 生成、Canvas 相框合成、二维码下载和打印入口串成适合校园展演的完整流程。
- ROLE / 职责
- 需求拆解、前后端联调、部署测试与故障处理
- FOCUS / 重点
- 外部 AI 或网络不稳定时，不能让现场流程整体失效。
- React
- TypeScript
- Express
- Canvas
- Mock 降级
现场流程
拍照、AI 任务轮询、相框合成和结果保存作为一条可观察的状态链路。
失败路径
外部 AI 超时、连续失败和 Mock 降级在流程设计时就被考虑，而不是现场报错后临时补救。
图像一致性
处理预览镜像与最终图方向一致，以及远程素材导致 Canvas 无法导出的跨域问题。
- 01摄像头拍照
- 02AI 任务轮询
- 03Canvas 相框合成
- 04二维码 / 本地保存
- 05现场打印入口
背景与约束
校园展演需要一台操作简单、结果可保存的自助终端。难点不只在调用图像接口，还包括摄像头、异步生成、Canvas 合成、网络波动和最后的展示。
我的职责
参与需求拆解、React 与 Express 前后端联调、文件处理、部署测试和现场故障定位。
把用户看到的拍照、等待、结果和失败状态拆成可检查的步骤，而不是只放一个调用按钮。
关键实现
前端控制摄像头与状态，后端处理图片输出；Canvas 固定 2:3 比例合成相框。
为远程素材准备代理路径，避免跨域污染 Canvas 后无法导出；同时保证预览镜像与最终图方向一致。
修复与回归验证
按浏览器请求、后端服务、外部 AI、文件输出和终端显示逐段检查。
超时、失败重试和 Mock 降级都有独立状态；验证重点是流程仍能交付可保存结果，而不只是接口是否返回。
限制与反思
公开页面只展示无人物、无二维码的流程界面。
项目保留打印入口，但现有公开证据不足以证明打印驱动或队列已经完整打通，因此不做该声明。
外部生成不稳定时，先保护现场流程
- 01
检查对象
分别观察摄像头输入、生成任务状态、图片合成和结果保存，而不把所有问题归到外部 AI。
- 02
关键差异
预览成功不代表最终图可导出：远程素材跨域会让 Canvas 被污染；任务开始也不代表结果已完成。
- 03
处理
使用受控素材路径、任务轮询、超时和有限重试；连续失败时提供 Mock 降级。
- 04
回归
确认预览与成图方向一致，正常与失败路径都能给出明确状态和可保存的结果。
边界：公开案例不展示人物照片、二维码、学校标识或未验证的打印机投递。