一拍成豆（Perler Snap）
基于纯前端 Canvas 的拍照拼豆图纸生成工具，支持拍照选图、尺寸裁剪、降采样、色号匹配、材料清单导出全流程
原生 H5Canvas图像处理AI 辅助原型
项目背景
希望用最小成本验证一个创意：让孩子把任意照片转成可拼的拼豆图纸。
挑战
- 移动端照片 EXIF 方向各异，需要正确校正
- 大尺寸图片在 Canvas 中处理存在性能风险
- 小尺寸图纸仍要保持色号清晰可读
- 坚持零依赖，所有图像算法需手写
解决方案
- 手动解析 EXIF Orientation 并做 Canvas 旋转校正
- 最长边超过 1024px 先预压缩，保证 3 秒内出图
- 自适应字号 + 短编号，确保 29×29 仍可辨读
- 纯前端 Canvas 流水线：裁剪 → 降采样 → 最近色映射 → 材料清单
成果
- 在极短时间内完成从创意到可演示原型的完整链路
- 实现拍照/选图、尺寸选择、背景标记、缩放、单格换色、PNG 导出等完整流程
- 纯静态 H5，零后端依赖，可部署到任意静态托管
技术栈
原生 HTMLCSSJavaScriptCanvas APIFile APIgetUserMedia
项目截图
