一拍成豆 · 初赛作品贴
【标签】 生活娱乐
【标题】 生活娱乐 · 一拍成豆（Perler Snap）—— 拍照即得拼豆图纸
1. Demo 简介
-
是什么：一款纯前端移动端 H5 应用（零后端、零依赖），拍照或上传任意图片，10 秒内自动生成带像素网格、色号标注、材料清单的拼豆图纸。
-
面向谁：5–12 岁爱玩拼豆的孩子及陪玩家长。
-
主要功能（建议配 3 张产品截图）：
-
拍照/选图即转换：调用摄像头或相册，手动解析 EXIF Orientation，竖拍/横拍/倒拍方向都不歪。 -
智能出图纸：中心裁剪 → 降采样 → 欧氏距离匹配 Hama 24 色，三档尺寸（15/20/29），Canvas 渲染网格+自适应色号，并附数量降序材料清单。 -
可交互微调：吸管点选去背景（阈值可调）、双指缩放/双击/拖拽、单格点选换色，一键下载 2000×2000 PNG。
2. Demo 创作思路
-
灵感来源：孩子看到喜欢的卡通图案想拼豆，却总卡在"找不到现成图纸"；家长只能全网搜索、手工对照描画。
-
想解决的问题：现有图纸分散在各平台、质量参差、搜索耗时；没有现成图纸时，手动绘制门槛极高，孩子往往只能放弃。
-
为什么做这个方向：把「看到想拼 → 获得图纸」的链路从数小时压缩到 10 秒。选择纯前端 Canvas、零第三方库，断网 /
file://也能跑，移动端即开即用，最贴合「孩子随手一拍」的场景。
3. Demo 体验地址
已部署公开体验链接：体验地址URL
纯静态 H5，手机浏览器直接打开即可；摄像头调用需 HTTPS 或 localhost，否则自动走相册上传。
4. TRAE 实践过程
用 TRAE 完成从需求设计到 P0/P1 两阶段落地的完整流程：
-
需求与技术设计：在 TRAE 中沉淀《一拍成豆 需求与设计》，锁定 13 项技术决策（色板、尺寸、EXIF 手动校正、Canvas 渲染、零依赖等）。
-
P0 核心链路：搭建单页三步骤骨架 + Hama 24 色板 → EXIF Orientation 解析与旋转校正 → 图像流水线（预压缩/裁剪/降采样/最近色映射）→ Canvas 图纸 + 材料清单。
-
P1 增强交互：背景标记吸管+阈值滑块 → 双指缩放/双击/拖拽手势 → 单格换色 → 下载 PNG，并修复阈值映射、拖拽误触点击等评审问题。
-
门禁与收尾：独立 reviewer 评审 diff（重点 EXIF/降采样/最近色/flood fill），手动验收对照清单，合并入 master。
关键步骤截图（不少于 3 张）：
关键任务对话 Session ID（不少于 3 个）：
-
1933409476154691:e2a95545a9fd65dab8a99a70d2faa2c9_6a51aa89180c642525eecec3.6a51b1b9a18d6f88a00838c0.6a51b1b9cc1aab3c9ee161eb:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/11 11:01:10)—— 需求说明书制作 -
.1933409476154691:32aa163dedae880ebbbf7dcd0097fa44_6a5310f3b03aa6a200eb9d63.6a532e3330163a5763d21c5e.6a532e32bf36aa22f50cbd0c:Trae CN.T(2026/7/12 14:03:31)—— 项目P0阶段执行 -
.1933409476154691:226c88bdc6620745867c5cf729ea68ff_6a5310f3b03aa6a200eb9d63.6a53339d30163a5763d21d62.6a53339cbf36aa22f50cbd0f:Trae CN.T(2026/7/12 14:26:37)—— REV 评审P0阶段代码 -
.1933409476154691:03b5f37fe9042bdb4458670a8c42ba21_6a5310f3b03aa6a200eb9d63.6a53413030163a5763d22050.6a53412ebf36aa22f50cbd15:Trae CN.T(2026/7/12 15:24:32)—— P1 工作流完工报告
5. 开发心得（额外部分，可选）
-
零依赖策略：原生 HTML + CSS + JS + Canvas，2.5 小时现场创作无构建、无环境依赖，失败面最小。
-
EXIF 手动解析：虽然比引入 exif-js 多写了几十行，但换来断网可用、路演更稳。
-
PL/DEV/REV 分离：TRAE 的规划/编码/评审分离让每一步都有可验收目标，避免返工。
-
性能兜底：最长边超过 1024px 先预压缩，保证 1024px 图片 3 秒内出图。
6. 技术栈速览
| 层 | 选型 |
|—|—|
| 语言/运行时 | 原生 HTML + CSS + JavaScript |
| 框架 | 无（零第三方库） |
| 图像处理 | Canvas API |
| EXIF 校正 | 手动读取 Orientation |
| 存储 | localStorage（P2 规划） |
| 部署 | 纯静态托管（Cloudflare Pages / Vercel / Gitee Pages） |
7. 项目信息
-
仓库：
perler-snap-demo-20260712 -
P0 完成：2026-07-12（核心链路）
-
P1 完成：2026-07-12（增强交互）
-
当前状态：P0 + P1 已完成，P2（抖动/多色板/打印优化/保存方案）规划中