如何自定义 face-api.js 中人脸关键点的绘制颜色与连线样式-html教程-PHP中文网

如何自定义 face-api.js 中人脸关键点的绘制颜色与连线样式

本文详解如何在 face-api.js 中通过 drawFaceLandmarks 的配置参数，灵活修改关键点（pointColor）和连接线（lineColor）的颜色、是否连线等样式，无需修改源码即可实现个性化渲染。

本文详解如何在 face-api.js 中通过 `drawfacelandmarks` 的配置参数，灵活修改关键点（pointcolor）和连接线（linecolor）的颜色、是否连线等样式，无需修改源码即可实现个性化渲染。

在使用 face-api.js 进行人脸关键点检测与可视化时，faceapi.draw.drawFaceLandmarks() 默认采用内置样式（如浅蓝色点、灰色连线），但其实际支持高度可定制的绘制选项。关键在于传入第三个可选参数 —— 一个配置对象（drawOptions），用于覆盖默认的视觉表现。

以下是在您原有 drawResults 函数中集成自定义样式的完整改造示例：

export const drawResults = async (image, canvas, results, type) => {
  if (image && canvas && results) {
    const imgSize = image.getBoundingClientRect();
    const displaySize = { width: imgSize.width, height: imgSize.height };
    faceapi.matchDimensions(canvas, displaySize);
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const resizedDetections = faceapi.resizeResults(results, displaySize);

    // ✅ 自定义关键点绘制样式（适用于 landmarks 和 boxLandmarks 模式）
    const landmarkDrawOptions = {
      drawLines: true,     // 是否绘制连接线（如轮廓、眉毛、嘴唇等拓扑连线）
      lineColor: '#FF4757', // 十六进制或 CSS 颜色名，推荐使用高对比度色
      pointColor: '#2ED573', // 关键点填充色（68个点均生效）
      lineWidth: 2,        // 连线粗细（可选，默认 1）
      pointRadius: 2       // 关键点半径（可选，默认 1）
    };

    switch (type) {
      case 'landmarks':
        faceapi.draw.drawFaceLandmarks(canvas, resizedDetections, landmarkDrawOptions);
        break;
      case 'expressions':
        faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
        break;
      case 'box':
        faceapi.draw.drawDetections(canvas, resizedDetections);
        break;
      case 'boxLandmarks':
        faceapi.draw.drawDetections(canvas, resizedDetections);
        faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
        faceapi.draw.drawFaceLandmarks(canvas, resizedDetections, landmarkDrawOptions);
        break;
      default:
        break;
    }
  }
};

? 注意事项与最佳实践：

Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

drawOptions 仅对 drawFaceLandmarks 生效，drawDetections 和 drawFaceExpressions 需另行定制（如通过 drawDetection 的 withCustomBoxes 或重写 drawFaceExpressions 的内部逻辑）；
若设置 drawLines: false，将仅显示离散关键点，不绘制任何连线；
pointRadius 和 lineWidth 在较新版本 face-api.js（≥1.7.6）中受支持，若报错请升级库：npm install face-api.js@latest；
颜色建议避免低对比度组合（如浅灰点+白底），确保在不同背景上清晰可见；
如需为不同人脸区域（如左眼、嘴唇）单独配色，需自行遍历 detection.landmarks 并调用底层 ctx.beginPath() 绘制，drawFaceLandmarks 不提供分区样式接口。