certificate-photo 证件照小程序核心流水线拆解：从选图、内容安全、AI抠图到合成的7个关键步骤
【免费下载链接】certificate-photo一个生成证件照的小程序，微信云原生开发小程序。 只fork不star是很没品的。项目地址: https://gitcode.com/gh_mirrors/ce/certificate-photo
certificate-photo 是一个基于微信云开发（小程序云函数）的开源证件照生成小程序，用户上传一张普通照片，就能自动完成智能抠图、换背景、换装换发型，一键生成一寸、二寸或自定义尺寸的证件照并保存到相册。这篇文章以「7个关键步骤」为主线，从选图、内容安全、AI抠图到图片合成，为你完整拆解证件照小程序的核心流水线实现思路，无论你是想学习微信云开发架构，还是计划开发同类型的证件照工具，都能快速读懂。
整体架构：小程序端与云函数如何分工
整个项目分两大块：小程序端（miniprogram）负责界面交互，云函数端（cloudfunctions）负责重计算。所有耗时任务——安全检测、AI抠图、图片合成——都放在云函数里执行，小程序只负责传参数和展示结果，这正是微信云原生开发的典型姿势。
| 环节 | 小程序页面 | 云函数 |
|---|---|---|
| 选尺寸、选照片 | searchSize / preEdit | — |
| 内容安全检测 | preEdit | imgSecCheck |
| AI抠图 | preEdit / editPhotoPlus | baiduKoutu / vipKoutu |
| 编辑调整 | editPhotoPlus | — |
| 图层合成 | editPhotoPlus | imageCompose |
| 下载保存 | complete | — |
| 次数与商业化 | editPhotoPlus | useCount / useVipCount |
第1步：选尺寸与上传照片（用户入口）
用户在首页选择「一寸」「二寸」或「自定义尺寸」后进入 preEdit.js，通过 wx.chooseMedia 从相册挑选照片，随后调用 wx.cloud.CDN 把图片传到临时 CDN 拿到临时地址——注意这里传的是 URL 而非文件 ID，方便后续云函数直接按地址拉取图片做检测和抠图。
这一步的关键设计是「只传地址、不传内容」，云函数之间通过 URL 或 fileID 流转图片数据，避免在小程序端频繁搬运二进制内容。
第2步：内容安全检测——腾讯+阿里双保险
证件照类小程序对内容合规要求很高，项目在 imgSecCheck/index.js 里实现了双通道检测：
- 先做预处理：图片宽高超过 750px 时，先调用 imageCompose 云函数压缩，因为腾讯的免费安全接口对图片尺寸有要求；
- 主检测：调用微信开放能力 imgSecCheck 检测；
- 兜底检测：腾讯接口报错时，自动切换阿里云内容安全接口（AliCloud.js）再查一次，返回 errCode 87014 即代表图片含敏感内容，小程序端会提示用户重新选择。
用「免费通道+付费兜底」的组合，既控制了成本，又保证了检测可用性，这个思路很值得借鉴。
第3步：AI智能抠图——百度人像分割与VIP精细抠图
内容安全通过后进入抠图环节，项目提供了两个档位：
- 免费版（baiduKoutu/index.js）：调用百度 AI 人像分割接口 bodySeg，取 foreground 前景图，把透明 PNG 上传云存储后返回临时 URL，整个过程在 preEdit.js 中触发，用户还没进编辑页，透明人像图就已经准备好了；
- 精细版（vipKoutu/index.js）：调用阿里 aisegment 的 matting 抠图接口（需 APPCODE），走「原图失败自动换压缩图重试」的降级逻辑，输出更高精度的透明人像，作为 VIP 增值服务。
抠图结果统一存到 tmp-file 集合，定时任务会定期清理临时文件。
第4步：在线编辑——换背景、换装、换发型
拿到透明人像后，进入核心编辑页 editPhotoPlus.js，支持：
- 背景色：内置红、蓝、白、透明四种常用色，还提供「自定义」打开 color-picker 取色器任意取色；
- 人像调整：通过 touch.js 实现单指拖动、双指缩放，人像位置和大小实时计算；
- 换装 / 换发型：从 imageStyle、hair 两个页面选择服装和发饰素材，叠加在人像之上，实现「证件照换装」效果。
所有编辑参数（坐标、缩放比例、颜色、素材 URL）在本地页面缓存，最后一次性提交给合成云函数。
第5步：图层合成——背景+人像+发饰+服装一次成型
imageCompose/index.js 是整条流水线的「合成车间」，用 reduce 把多个图层按顺序逐层 draw 到同一张图上：
- 底图：按目标证件照尺寸生成纯色背景；
- 人像层：透明抠图结果；
- 发饰层、服装层：按计算好的坐标叠加。
合成结果按 jpg 输出并上传云存储，返回临时 URL，同时登记到 tmp-file 集合方便定时清理。由于所有图层都带 x、y、width、height 坐标，这套合成方案可以灵活扩展任意素材层，通用性很强。
第6步：下载保存——从云端到相册
编辑完成后，editPhotoPlus.js 先 wx.downloadFile 把合成图下载到本地临时文件，再 wx.saveImageToPhotosAlbum 保存到相册（无权限时引导用户打开设置授权），最后跳转到 complete.js 结果页，展示照片的像素尺寸和文件大小。普通用户每次成功保存还会自动扣减一次使用次数。
第7步：次数管理与激励视频商业化
作为可持续运营的证件照小程序，商业化闭环也很完整：useCount/index.js 负责维护 user 集合中的累计生成数、剩余次数和签到时间；用户看完激励视频广告可获得一次免费生成机会，VIP 用户则拥有精细抠图的 vipCount 配额，由 useVipCount 云函数单独管理。
此外，shareSuccessCallback 与 shareUpdate 两个云函数追踪分享行为并发放奖励，配合编辑页内置的作者分享卡片（WechatIMG199.jpeg），构成了「分享—回流—奖励」的传播链路。
把7个步骤串成一条证件照流水线
回顾一下：选图上传 → 内容安全检测 → AI抠图 → 在线编辑 → 图层合成 → 下载保存 → 次数与商业化，这7个关键步骤就是 certificate-photo 从一张普通照片到标准证件照的完整旅程。每一步都有独立云函数负责、职责单一，页面与云函数通过 URL/fileID 松耦合，既方便单独调试，也方便替换任意环节的第三方服务。如果你想深入源码，重点看 cloudfunctions/imgSecCheck/、cloudfunctions/baiduKoutu/、cloudfunctions/imageCompose/ 三个目录，基本就掌握了这套证件照生成流水线的全部精髓。😉
【免费下载链接】certificate-photo一个生成证件照的小程序，微信云原生开发小程序。 只fork不star是很没品的。项目地址: https://gitcode.com/gh_mirrors/ce/certificate-photo
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
