TensorFlow.js Face Landmarks Detection 技术解析与应用指南

郁勉能Lois

于 2025-06-02 09:18:20 发布

阅读量228

点赞数 5

本文链接：https://blog.youkuaiyun.com/gitblog_00116/article/details/148378077

版权

TensorFlow.js Face Landmarks Detection 技术解析与应用指南

tfjs-models Pretrained models for TensorFlow.js 项目地址: https://gitcode.com/gh_mirrors/tf/tfjs-models

项目概述

TensorFlow.js Face Landmarks Detection 是一个基于 TensorFlow.js 框架的面部特征点检测模型库，能够实时检测人脸并追踪面部关键点。该项目特别适用于需要在浏览器端实现面部特征分析的场景，如增强现实(AR)、虚拟化妆、面部表情识别等应用。

核心模型介绍

当前项目主要提供 MediaPipe FaceMesh 模型：

MediaPipe FaceMesh 模型特点

多脸检测：可同时检测图像中的多张人脸
高精度关键点：每张人脸可检测多达 478 个关键点
3D 坐标：提供关键点的 x、y、z 三维坐标
语义标签：部分关键点带有语义标签（如嘴唇、左眼等）
跨平台支持：可在浏览器和移动设备上运行

技术实现详解

模型初始化

使用该库需要先创建检测器实例，主要分为两个步骤：

选择模型类型（目前仅支持 MediaPipeFaceMesh）
配置检测器参数

// 1. 选择模型类型
const model = faceLandmarksDetection.SupportedModels.MediaPipeFaceMesh;

// 2. 配置检测器
const detectorConfig = {
  runtime: 'mediapipe', // 可选 'mediapipe' 或 'tfjs'
  solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh',
};

// 3. 创建检测器实例
const detector = await faceLandmarksDetection.createDetector(model, detectorConfig);

关键参数说明

runtime：指定运行环境
- mediapipe：使用 MediaPipe 解决方案，性能更优
- tfjs：使用纯 TensorFlow.js 实现，兼容性更好
solutionPath：当使用 mediapipe 运行时，需要指定 MediaPipe 解决方案的 CDN 路径

面部检测与关键点提取

初始化检测器后，可对图像进行面部检测：

const faces = await detector.estimateFaces(image);

返回结果是一个数组，包含检测到的所有人脸信息。若无检测到人脸，则返回空数组。

输出数据结构解析

每个检测到的人脸对象包含以下信息：

{
  box: {
    xMin: 304.6,  // 人脸框左边界
    xMax: 502.5,  // 人脸框右边界
    yMin: 102.1,  // 人脸框上边界
    yMax: 349.0,  // 人脸框下边界
    width: 197.8, // 人脸框宽度
    height: 246.8 // 人脸框高度
  },
  keypoints: [
    {
      x: 406.5,   // 关键点x坐标(像素)
      y: 256.8,   // 关键点y坐标(像素)
      z: 10.2,    // 关键点深度值
      name: "lips" // 关键点语义标签(可选)
    },
    // ...更多关键点
  ]
}