关于javascript:使用-Faceapijs-在-Web-上进行人脸检测

Web 浏览器日益弱小，网站和 Web 应用程序的复杂性也在减少。几十年前须要超级计算机的操作当初能够在智能手机上运行，其中之一就是人脸检测。

检测和剖析人脸的能力十分有用，因为它能让咱们增加聪慧的特色。比方主动含糊人脸 (比方谷歌 Maps)、挪动和缩放摄像头 feed 以聚焦于人(比方微软团队)、验证护照、增加愚昧的滤镜(比方 Instagram 和 Snapchat) 等等。但在这之前，咱们得先找到那张脸！

Face-api.js 是一个库，使开发人员无需机器学习背景即可在其应用程序中应用人脸检测。

本教程的代码可在 GitHub 上找到。https://github.com/sitepoint-…

机器学习人脸检测

检测物体，如人脸，是相当简单的。想一想：兴许咱们能够写一个程序，通过扫描像素来找到眼睛、鼻子和嘴巴。这是能够做到的，但要使它齐全牢靠，实际上是无奈实现的，因为有许多因素须要思考。想想光照条件、面部毛发、各种各样的形态和色彩、化妆、角度、脸部面具，以及其余许多因素。

然而，神经网络善于解决这类问题，并且能够推广到大多数（如果不是全副）条件。咱们能够应用风行的 JavaScript 机器学习库 TensorFlow.js 在浏览器中创立、训练和应用神经网络。然而，即便咱们应用现成的、预训练的模型，咱们依然会对向 TensorFlow 提供信息和解释输入的细节有所理解。

应用 face-api.js，它将所有这些都包装到一个直观的 API 中。咱们能够传递一个 img、canvas 或 video DOM 元素，该库将返回一个或一组后果。Face-api.js 能够检测人脸，但也能够预计其中的各种内容，如下所列。

• 面部检测：获取一张或多张人脸的边界，这对于确定图片中人脸的地位和大小很有用。
• 面部地标检测：获取眉毛、眼睛、鼻子、嘴和嘴唇以及下巴的地位和形态。这能够用来确定朝向或在特定区域投射图形，如鼻子和嘴唇之间的胡子。
• 面部辨认：确定谁在画面中。
• 面部表情检测：从一个人的脸上取得表情。
• 年龄和性别检测：从一张脸中失去年龄和性别。请留神，在“性别”分类中，它将一张脸分为女性化或男性化，这并不一定揭示他们的性别。

在你在试验之外应用这些货色之前，请留神，人工智能善于放大偏见。性别分类对双性恋者来说成果很好，但它不能检测我的非双性恋敌人的性别。它在大多数时候都能辨认出白人，但常常无奈检测到有色人种。

在应用这项技术时要十分周到，并与不同的测试小组进行彻底的测试。

装置

咱们能够通过 npm 装置 face-api.js：

npm install face-api.js

然而，为了跳过构建工具的设置，我将通过 unpkg.org 包含 UMD 包：

/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';

之后，咱们须要从库的资源库中下载正确的预训练模型。

确定咱们想从脸部晓得什么，并应用可用模型局部来确定须要哪些模型。有些性能能够应用多个模型。在这种状况下，咱们必须在带宽 / 性能和精度之间做出抉择。比拟各种可用模型的文件大小，抉择你认为最适宜你的我的项目的模型。

不确定你的应用须要哪些型号？你能够稍后再回到这个步骤。当咱们在没有加载所需模型的状况下应用 API 时，将抛出一个谬误，阐明该库所冀望的模型。

咱们当初筹备应用 face-api.js API。

示例

让咱们来建造一些货色吧！

对于上面的示例，我将应用此函数从 Unsplash Source 加载随机图像：

function loadRandomImage() {const image = new Image();

  image.crossOrigin = true;

  return new Promise((resolve, reject) => {image.addEventListener('error', (error) => reject(error));
    image.addEventListener('load', () => resolve(image));
    image.src = 'https://source.unsplash.com/512x512/?face,friends';
  });
}

裁剪图片

你能够在附带的 GitHub repo 中找到这个演示的代码。https://github.com/sitepoint-…

首先，咱们要抉择并加载模型。为了裁剪图像，咱们只须要晓得一个人脸的边界框，所以人脸检测就足够了。咱们能够用两个模型来做。SSD Mobilenet v1 模型（仅低于 6MB）和 Tiny Face Detector 模型（低于 200KB）。咱们说准确性是不相干的，因为用户也能够抉择手动裁剪。此外，让咱们假如访问者在迟缓的网络连接上应用这个性能。因为咱们的重点是带宽和性能，咱们将抉择较小的 Tiny Face Detector 模型。

下载模型后，咱们能够加载它：

await faceapi.nets.tinyFaceDetector.loadFromUri('/models');

咱们当初能够加载图像并将其传递给 face-api.js。faceapi.detectAllFaces 默认应用 SSD Mobilenet v1 模型，因而咱们必须显式传递 new faceapi.TinyFaceDetectorOptions() 以强制它应用 Tiny Face Detector 模型。

const image = await loadRandomImage();
const faces = await faceapi.detectAllFaces(image, new faceapi.TinyFaceDetectorOptions());

变量 faces 当初蕴含一个后果数组。每个后果都有一个 box 和 score属性。分数示意神经网络对该后果的确是一张脸的自信水平。box 蕴含一个有脸部坐标的对象，咱们能够抉择第一个后果（或者咱们能够应用 faceapi.detectSingleFace()），然而如果用户提交了一张个体照片，咱们心愿在裁剪后的图片中看到所有的人。为了做到这一点，咱们能够计算一个自定义的边界框。

const box = {
  // 将边界设置为它们的逆无穷大，因而任何数字都更大 / 更小
  bottom: -Infinity,
  left: Infinity,
  right: -Infinity,
  top: Infinity,

  // 给出边界，咱们能够计算出宽度和高度
  get height() {return this.bottom - this.top;},

  get width() {return this.right - this.left;},
};

// 更新 box 的边界
for (const face of faces) {box.bottom = Math.max(box.bottom, face.box.bottom);
  box.left = Math.min(box.left, face.box.left);
  box.right = Math.max(box.right, face.box.right);
  box.top = Math.min(box.top, face.box.top);
}

最初，咱们能够创立一个画布并显示后果：

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

canvas.height = box.height;
canvas.width = box.width;

context.drawImage(
  image,
  box.left,
  box.top,
  box.width,
  box.height,
  0,
  0,
  canvas.width,
  canvas.height
);

搁置表情符号

你能够在附带的 GitHub repo 中找到这个演示的代码。https://github.com/sitepoint-…

为什么不找点乐子呢？咱们能够做一个过滤器，在所有的眼睛上放一个嘴巴的表情符号（👄）。为了找到眼睛的地标，咱们须要另一个模型。这一次，咱们关怀的是准确性，所以咱们应用 SSD Mobilenet v1 和 68 点面部地标检测模型。

同样，咱们须要先加载模型和图像：

await faceapi.nets.faceLandmark68Net.loadFromUri('/models');
await faceapi.nets.ssdMobilenetv1.loadFromUri('/models');

const image = await loadRandomImage();

为了取得地标，咱们必须将 withFaceLandmarks() 函数调用附加到 detectAllFaces() 中以取得地标数据。

const faces = await faceapi
  .detectAllFaces(image)
  .withlandmarks();

和上次一样，faces 蕴含一个后果列表。除了脸部的地位外，每个后果还蕴含一个地标的原始点列表。为了失去每个特色的正确地标，咱们须要对点的列表进行切片。因为点的数量是固定的，所以我抉择了硬编码的索引。

for (const face of faces) {
  const features = {jaw: face.landmarks.positions.slice(0, 17),
    eyebrowLeft: face.landmarks.positions.slice(17, 22),
    eyebrowRight: face.landmarks.positions.slice(22, 27),
    noseBridge: face.landmarks.positions.slice(27, 31),
    nose: face.landmarks.positions.slice(31, 36),
    eyeLeft: face.landmarks.positions.slice(36, 42),
    eyeRight: face.landmarks.positions.slice(42, 48),
    lipOuter: face.landmarks.positions.slice(48, 60),
    lipInner: face.landmarks.positions.slice(60),
  };

  // ...
}

当初咱们终于能够享受一点乐趣了。有很多抉择，但让咱们用嘴巴表情符号 (👄）遮住眼睛。

首先，咱们必须确定将表情符号放在哪里，以及它应该画多大。为了做到这一点，让咱们写一个辅助函数，从一个任意的点汇合中创立一个盒子，这个盒子里有咱们须要的所有信息。

function getBoxFromPoints(points) {
  const box = {
    bottom: -Infinity,
    left: Infinity,
    right: -Infinity,
    top: Infinity,

    get center() {
      return {
        x: this.left + this.width / 2,
        y: this.top + this.height / 2,
      };
    },

    get height() {return this.bottom - this.top;},

    get width() {return this.right - this.left;},
  };

  for (const point of points) {box.left = Math.min(box.left, point.x);
    box.right = Math.max(box.right, point.x);

    box.bottom = Math.max(box.bottom, point.y);
    box.top = Math.min(box.top, point.y);
  }

  return box;
}

当初咱们能够开始在图片上绘制表情符号。因为咱们必须对两只眼睛都这样做，所以咱们能够把 feature.eyeLeft 和 feature.eyeRight 放在一个数组中，而后对它们进行迭代，对每只眼睛执行同样的代码。剩下的就是在画布上画出表情符号了！

for (const eye of [features.eyeLeft, features.eyeRight]) {const eyeBox = getBoxFromPoints(eye);
  const fontSize = 6 * eyeBox.height;

  context.font = `${fontSize}px/${fontSize}px serif`;
  context.textAlign = 'center';
  context.textBaseline = 'bottom';

  context.fillStyle = '#000';
  context.fillText('👄', eyeBox.center.x, eyeBox.center.y + 0.6 * fontSize);
}

请留神，我应用了一些魔法数字来调整字体大小和确切的文本地位。因为表情符号是 unicode 并且 Web 上的排版很奇怪（至多对我来说），所以我只是调整数字，直到它们看起来正确为止。更弱小的代替办法是应用图像作为叠加层。

总结

Face-api.js 是一个平凡的库，它使人脸检测和辨认变得非常容易。不须要相熟机器学习和神经网络的常识。我喜爱那些能够应用的工具，而这相对是其中之一。

依据我的教训，Web 上的人脸识别会影响性能。咱们必须在带宽和性能或准确性之间做出抉择。较小的模型必定不太精确，并且会在我之前提到的一些因素中脱漏人脸，例如光线有余或面部被面具笼罩时。

Microsoft Azure、Google Cloud 和其余可能的企业都在云中提供人脸检测。因为咱们防止下载大模型，基于云的检测防止了沉重的页面加载，随着它的频繁改良往往更精确，并且因为优化的硬件甚至可能更快。如果您须要高精度，您可能须要钻研一个您称心的打算。

我相对举荐你在业余我的项目、试验中应用 face-api.js，兴许还能够用来做 MVP。