# AI 人脸检测与关键点教程：浏览器本地定位 478 个人脸关键点

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/ai-face-landmarker-guide

## 工具简介

**AI 人脸检测与关键点**是工具派推出的一款基于 MediaPipe Face Landmarker 的浏览器端 AI 视觉工具：只要上传一张包含人脸的照片，它就能在浏览器本地自动检测出画面中的所有人脸，并为每张人脸定位 **478 个关键点**，把特征点与连线网格实时绘制在结果图上。检测完成后，你可以一键下载带绿色关键点网格的标注图，也可以导出每张人脸关键点的归一化坐标 JSON 数据，方便做人脸分析、姿态估计、AR 贴纸等二次开发。整个过程在浏览器本地完成，照片不会上传到服务器，打开即用、无需安装。

## 功能亮点

- **478 个高精度关键点**：基于 MediaPipe Face Landmarker 模型，每张人脸输出 478 个特征点，覆盖眉毛、眼睛、鼻子、嘴唇轮廓与面部轮廓，并自动绘制关键点连线网格。
- **多人脸同时检测**：合影、集体照中的每张人脸都会被逐一检测并独立绘制网格，检测结果卡片会明确报告「检测到 N 张人脸，每张 478 个关键点」。
- **纯浏览器本地运行**：模型在本地加载和推理，照片全程不离开你的设备，隐私安全有保障，也无需等待服务器排队。
- **原图 / 结果对比展示**：检测完成后页面以双栏形式并排展示「原图」和「关键点结果」，绿色网格叠加效果一目了然。
- **两种结果下载方式**：「下载标注图」保存带关键点网格的 PNG 图片；「下载 JSON」导出每张人脸 478 个点的 x、y、z 归一化坐标，便于程序化使用。
- **模型加载进度可见**：首次使用时页面显示「模型加载中 X%」进度条，模型缓存后再次检测几乎即点即出。
- **零门槛免安装**：无需注册即可体验，不装插件、不配环境，打开网页就能用。

## 参数说明

| 参数 | 说明 | 默认值 / 取值范围 |
| --- | --- | --- |
| 上传图片 | 点击「选择文件」上传待检测的人脸照片，是检测的唯一输入 | 支持 JPG / PNG / WEBP，单文件最大 10MB，必选 |
| 开始检测 | 触发人脸检测的按钮；未上传图片时按钮禁用 | 按钮文案：开始检测 / 检测中... |
| 模型加载进度条 | 首次检测时下载并初始化 MediaPipe 模型，实时显示百分比 | 仅首次出现，0–100% |
| 检测结果 | 检测完成后展示人脸数量与每张人脸的关键点数量 | 文案：检测到 N 张人脸，每张 478 个关键点 |
| 下载标注图 | 把叠加了绿色关键点网格的结果图保存为 PNG | 文件名 `face_landmarks_时间戳.png` |
| 下载 JSON | 导出每张人脸的关键点坐标数组，含 faceIndex、pointCount 与 points（x、y、z） | 文件名 `face_landmarks_时间戳.json`，坐标为 0–1 归一化值 |

## 使用步骤

1. **打开工具页面**：顶部是工具标题与功能简介，中间的「上传图片」卡片是主要操作区，包含文件选择按钮和蓝色的「开始检测」按钮；无需安装任何软件，浏览器打开即用。

![AI 人脸检测与关键点工具主界面：顶部白色卡片展示工具标题与「使用 MediaPipe 在浏览器本地定位 478 个人脸](article/202607/1783999858798_2612.png)

2. **上传图片**：点击「选择文件」，选择一张包含人脸的照片，支持 JPG / PNG / WEBP，大小不能超过 10MB；选择成功后页面下方会出现「原图」预览。

3. **开始检测**：点击蓝色「开始检测」按钮。首次使用需要先加载 MediaPipe 模型，页面会显示「模型加载中 X%」的进度条，模型就绪后自动开始推理，按钮变为「检测中...」。

4. **查看检测结果**：检测完成后，结果区以双栏并排展示「原图」与「关键点结果」，人脸位置叠加了绿色的关键点与连线网格；下方「检测结果」卡片会显示检测到的人脸数量。若画面中没有可识别的人脸，会提示「未检测到人脸，请尝试其他图片」。

5. **下载结果**：在「检测结果」卡片中，点击「下载标注图」可保存带关键点网格的 PNG 图片；点击「下载 JSON」则导出每张人脸 478 个关键点的归一化坐标（x、y、z，取值 0–1），可用于二次开发。

## 使用技巧

- **首次加载请耐心等待**：模型文件较大，第一次点击检测需要下载并初始化 MediaPipe 模型，进度条走完即可；之后模型会缓存在浏览器中，再次使用速度明显加快。
- **清晰正脸效果最好**：面部无遮挡、光线充足、分辨率适中的照片关键点定位最准；过度模糊、大角度侧脸、戴口罩或墨镜的照片可能漏检或定位偏移。
- **合影可以一次检完**：多人合照无需裁剪，工具会自动遍历画面中的所有人脸并分别绘制网格，检测结果卡片会报告人脸总数。
- **超限图片先压缩**：超过 10MB 会提示「图片大小不能超过 10MB」，可先用工具派的图片压缩工具处理后再上传。
- **JSON 坐标记得换算**：导出的 x、y 是相对图片宽高的 0–1 比例值，乘以图片实际像素宽高即可还原像素坐标；z 为相对深度，同样做了归一化。
- **隐私敏感场景放心用**：整个检测在浏览器本地完成，照片不会经过网络传输，适合处理不便外传的证件照、生活照。

## 常见问题

**Q1：478 个关键点是什么？**
MediaPipe Face Landmarker 模型为每张人脸输出 478 个特征点，分布在眉毛、眼睛、鼻子、嘴唇轮廓和面部外轮廓上。工具会把这些点以及点之间的连线（网格）绘制在结果图上，形成常见的「人脸网格」效果。

**Q2：我的照片会上传到服务器吗？**
不会。模型在浏览器本地加载和运行，图片始终留在你的设备上，整个检测过程不经过网络传输，隐私有充分保障。

**Q3：支持同时检测多个人脸吗？**
支持。合影中每张人脸都会被独立检测并绘制各自的关键点网格，「检测结果」卡片会显示检测到的人脸总数；下载的 JSON 中每张人脸用 `faceIndex` 字段区分。

**Q4：为什么提示「未检测到人脸，请尝试其他图片」？**
常见原因包括人脸在画面中占比太小、照片过度模糊、大角度侧脸、面部被手或物品遮挡、光线太暗等。换一张清晰、正脸、面部占比适中的照片再试即可。

**Q5：支持哪些图片格式？有大小限制吗？**
支持 JPG、PNG、WEBP 等浏览器可解析的常见图片格式，单个文件最大 10MB。超过限制会提示「图片大小不能超过 10MB」，需要先压缩再上传。

**Q6：下载的 JSON 里 x、y、z 分别代表什么？**
x、y 是关键点相对于图片宽、高的归一化坐标（取值 0–1），乘以图片实际宽高即可得到像素位置；z 表示该点相对于面部平面的深度信息，同样经过归一化，可用于三维面部分析与 AR 应用。