夜雨聆风家人们谁懂啊！🤯 朋友让我帮忙做个证件照小程序，需求超简单：上传照片→AI 自动抠图→切换红白蓝背景→生成标准一寸 / 二寸照。本以为是 “小菜一碟”，结果开发时踩坑踩到脚软！
但！全程靠 AI 编程开挂，从 API 调用到代码调试都有 AI 助力，最终还是搞定了可用版本～ 今天就把这份「AI + 小程序」开发实录分享出来，技术党直接抄作业，小白也能避坑！🚀
📌 本文看点：
💡 1|项目需求
用户上传照片时，不管是从相册选图还是当场拍照，AI 都会自动完成图片压缩优化 —— 既保证照片清晰度够打印标准，又不会因为文件太大导致上传卡顿。抠图环节更是不用手动操作，调用的 AI 人像分割能力能毫秒级把人像和背景精准分开，连头发丝这种细节都不会遗漏，完全不用像传统工具那样手动涂抹调整。
背景色切换也做到了 “一键到位”，白、蓝、红三种证件照常用色都经过 AI 校准，匹配官方标准色值，不管是用于简历、报名还是证件办理，都能直接通过审核。尺寸方面，一寸和二寸的标准规格不用用户自己换算像素，AI 会根据 25×35mm、35×49mm 的物理尺寸，自动计算出对应像素比并完成裁剪，确保照片比例合规，不会出现打印后变形的情况。
⚡ 2|开发全过程
因为是打算做成微信小程序，所以选用了企鹅家的AI编程工具：CodeBuddy！！
用下来，感觉还不错呦~~~
主要有这几步：需求梳理、制定开发计划、开始编程、测试+修改、发布小程序。
⚙️ Step 1、需求梳理
打开CodeBuddy直接用大白话大声说出你的需求：
Plain Text 1、开发一个微信小程序； 2、功能：用户上传一张照片，制作证件照，背景色可选：白、蓝、红 帮我梳理需求 |
刷刷刷，CodeBuddy在收到你的需求后立刻开始行动，并且会深入向你提问，明确需求：
⚙️ Step 2、制定开发计划
待需求明确后，CodeBuddy并不会着急开发，而是会制定一个非常具体详尽的开发计划：
Markdown ## 技术栈- **前端框架**：微信小程序原生开发（WXML + WXSS + JavaScript） - **后端服务**：微信云开发（云函数 + 云存储） - **AI能力**：腾讯云人像分割API（通过云函数调用） - **图片处理**：前端Canvas + 云存储图片处理 ## 技术架构### 系统架构图```mermaid graph TD A[用户上传照片] --> B[云存储] B --> C[云函数-人像分割] C --> D[腾讯云人像分割API] D --> E[抠图结果] E --> F[前端Canvas渲染] F --> G[背景替换处理] G --> H[智能裁剪] H --> I[最终证件照] I --> J[保存到相册] ``` ### 模块划分1. **前端页面模块**- 首页：功能入口和尺寸选择 - 上传页：照片选择和预览 - 处理页：抠图结果显示和背景切换 - 裁剪页：最终尺寸裁剪和保存 2. **云函数模块**- 人像分割云函数：调用腾讯云API处理图片 - 图片上传云函数：处理图片存储和URL生成 3. **组件模块**- 背景选择器：切换白/蓝/红背景 - 照片预览组件：显示处理结果 - 裁剪框组件：支持尺寸裁剪调整 ## 目录结构``` project-root/ ├── miniprogram/# 小程序主目录 │├── app.js# 小程序入口 │├── app.json# 全局配置 │├── app.wxss# 全局样式 │├── pages/# 页面目录 ││├── index/# 首页 │││├── index.wxml │││├── index.wxss │││└── index.js ││├── upload/# 上传页 │││├── upload.wxml │││├── upload.wxss │││└── upload.js ││├── process/# 处理页 │││├── process.wxml │││├── process.wxss │││└── process.js ││└── result/# 结果页 ││├── result.wxml ││├── result.wxss ││└── result.js │├── components/# 组件目录 ││├── color-picker/# 背景色选择器 ││└── photo-preview/# 照片预览组件 │├── utils/# 工具目录 ││├── request.js# 请求封装 ││└── imageUtil.js# 图片处理工具 │└── images/# 静态资源 │└── bg_*.png# 背景色示例图 ├── cloudfunctions/# 云函数目录 │├── personSegment/# 人像分割云函数 ││├── index.js ││├── package.json ││└── tencentcloud.config.js# 腾讯云配置 │└── uploadImage/# 图片上传云函数 │├── index.js │└── package.json └── project.config.json# 项目配置文件 ``` ## 关键实现### 1. 人像分割流程- 用户上传图片 → 存储到云存储 → 调用云函数 → 云函数调用腾讯云人像分割API → 返回透明背景PNG → 前端渲染 ### 2. 证件照尺寸规格（像素计算：300DPI）- 一寸：295px × 413px - 二寸：413px × 579px ### 3. 背景颜色参数- 白色：#FFFFFF - 蓝色：#RGB(27, 142, 255) 蓝色渐变参考 - 红色：#RGB(220, 50, 35) ### 4. 智能裁剪算法- 基于人脸检测确定人像位置 - 头顶留白约1/10，下巴以下留白约1/6 - 保持人像居中，按证件照比例裁剪 ## 设计风格采用现代简约风格，强调功能性交互和清晰的视觉层次。整体设计干净利落、专业可信，适合证件照工具的正式用途。 ## 页面结构### 首页（index）- 顶部：品牌标识和简洁标语 - 中部：尺寸选择卡片（一寸/二寸） - 底部：开始制作按钮 ### 上传页（upload）- 全屏预览区域 - 底部：相册选择/拍照按钮 - 引导文案提示 ### 处理页（process）- 证件照预览区域（带背景色） - 底部：三个背景色切换按钮 - 调整说明文字 ### 结果页（result）- 高清证件照预览 - 尺寸信息标注 - 保存到相册按钮 - 重新制作按钮 ## 交互设计- 流畅的页面转场动画 - 背景色切换带平滑过渡效果 - 上传和处理过程中的loading动画 - 成功保存后的轻提示反馈 ## Agent Extensions- **code-explorer**- Purpose: 在开发过程中探索小程序代码结构、调试复杂逻辑 - Expected outcome: 快速定位页面组件、云函数实现细节 |
⚙️ Step 3、开始编程
待确认计划后，CodeBuddy收到你的指令即开始编程。
⚙️ Step 4、测试+修改
代码完成后，就能通过“微信开发者工具”进行反复调试、修改，这是一个不断重复的过程，直到你满意为止！！
最后，就可以发布上线啦~~~
🛠️ 3 | AI编程实战总结
AI 是配置神器：云开发、API 调用等复杂配置，让 AI 生成代码片段，直接复制粘贴
AI 是排错高手：遇到报错不用搜半天，甩给 AI 立刻定位问题，给出解决方案
AI 是效率工具：重复工作（如目录搭建、参数计算）交给 AI，专注核心功能开发
渐进式开发 + AI：先靠 AI 实现基础版本，再逐步用 AI 优化高级功能，不贪多求全
API 限制要注意：AI 会提醒你云函数返回大小、域名配置等坑，提前规避
这次开发虽然踩了不少坑，但 AI 编程全程兜底，让一个 “半吊子” 开发者也能做出可用的证件照小程序！🤣 其实很多技术难题，AI 都能帮你快速解决，关键是要学会利用工具～
如果你也想开发类似小程序，或者有 AI 编程相关的问题，欢迎交流讨论！觉得有用的话，点赞收藏一波，下次开发不迷路～ 🌟
P.S. 想要吗？留言哦～～ 哈哈哈
END
我是 AI 小帅超会玩 🤖
带你解锁更多 AI 黑科技！✨
如果你觉得今天这篇有收获，
欢迎点赞、在看、转发三连，我们下期不见不散～ 👋🏻
