工具实现揭秘图片工具
证件照制作是怎么实现的（含儿童入园照）
浏览器里跑人像分割模型——MediaPipe WebAssembly 本地抠图的完整拆解
TL;DR：证件照制作工具（原名儿童入园照，入园/签证/考试/简历通用）在浏览器里完成「抠图换底色 + 一寸/二寸规格排版 + 6 寸照打印排版」，最特别的一点：人像分割模型（12.2MB）下载到你的浏览器本地运行，孩子的照片从头到尾不经过任何服务器。这是全套工具里技术含量最高的一篇。
⏱️ 30 秒上手
- 打开 tools.guangmin.top/tools/id_photo_kids（电脑端）；
- 首次使用会加载约 12.2MB 的本地抠图引擎（下载一次，之后浏览器缓存）；
- 选择纯色背景前的正面照片，选规格（一寸 25×35mm / 二寸 35×49mm）与底色（白/蓝/红）；
- 预览确认后下载单张证件照，或选 6 寸照排版（152×102mm 多张同版）拿去照相馆/家用打印机冲印。
🔧 它是怎么实现的
四个关键技术点：
- MediaPipe Tasks Vision：谷歌开源的端侧（在设备上运行）机器视觉库。其中的 Selfie Segmenter 模型输出一张「掩码」（mask，与原图同尺寸的灰度图，标记每个像素属于人还是背景）。模型以 WebAssembly + tflite（轻量模型格式）分发——浏览器加载它并本地推理，这是「照片不上传」的技术根基；
- WASM 的意义：WebAssembly 让浏览器以接近原生的速度执行编译好的 C++ 代码。人像分割是每像素计算，纯 JavaScript 跑不动，WASM 把单张推理压到亚秒级；
- 毫米换算像素：证件照规格用真实尺寸（一寸 25×35mm），换算公式是
像素 = 毫米 × DPI ÷ 25.4（DPI 即每英寸点数，打印精度标准取 300）——排版模块按这个换算在画布上定位、居中、留白边； - 引擎懒加载：12.2MB 的引擎文件只在首次使用时下载（动态 import 不进首屏代码包），之后浏览器 HTTP 缓存命中，二次使用零等待。
📏 边界与限制
| 项 | 值 | 说明 |
|---|---|---|
| 引擎体积 | 12.2MB（模型 244KB + WASM 运行时 12MB） | 首次下载，之后走缓存 |
| 平台 | 仅电脑端 | 手机浏览器内存与 WASM 兼容性受限 |
| 照片要求 | 纯色背景、光线均匀、正面、肩部以上 | 复杂背景分割质量下降 |
| 单文件上限 | 20MB | 超出提示 |
| 下载格式 | PNG（无损，适合冲印） | — |
🔒 隐私口径（这个工具的核心卖点）
儿童照片是敏感个人信息。本工具的整条链路——文件读取、模型推理、底色替换、排版、下载——全部发生在你的浏览器进程里；服务器唯一做的事是把页面和引擎文件递给你（引擎文件是公开的静态资源，与你的照片无关）。关掉页面，一切痕迹只在你电脑的浏览器缓存里。