您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

使用 Face-api.js 在 Web 上进行人脸检测

时间:2021-08-20 10:18:21  来源:  作者:杭州程序员小张

Web 浏览器日益强大,网站和 Web 应用程序的复杂性也在增加。几十年前需要超级计算机的操作现在可以在智能手机上运行,其中之一就是人脸检测。

检测和分析人脸的能力非常有用,因为它能让我们添加聪明的特征。比如自动模糊人脸(比如谷歌Maps)、移动和缩放摄像头feed以聚焦于人(比如微软团队)、验证护照、添加愚蠢的滤镜(比如Instagram和Snapchat)等等。但在这之前,我们得先找到那张脸!

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

本教程的代码可在 GitHub 上找到。
https://github.com/sitepoint-editors/demo-face-api-js

机器学习人脸检测

检测物体,如人脸,是相当复杂的。想一想:也许我们可以写一个程序,通过扫描像素来找到眼睛、鼻子和嘴巴。这是可以做到的,但要使它完全可靠,实际上是无法实现的,因为有许多因素需要考虑。想想光照条件、面部毛发、各种各样的形状和颜色、化妆、角度、脸部面具,以及其他许多因素。

然而,神经网络擅长解决这类问题,并且可以推广到大多数(如果不是全部)条件。我们可以使用流行的 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 在 Web 上进行人脸检测

 

我们现在准备使用 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-editors/demo-face-api-js/blob/main/scripts/1-image-crop.js

首先,我们要选择并加载模型。为了裁剪图像,我们只需要知道一个人脸的边界框,所以人脸检测就足够了。我们可以用两个模型来做。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
);
使用 Face-api.js 在 Web 上进行人脸检测

 

/ 放置表情符号 /

你可以在附带的GitHub repo中找到这个演示的代码。
https://github.com/sitepoint-editors/demo-face-api-js/blob/main/scripts/2-emoji-eyes.js

为什么不找点乐子呢?我们可以做一个过滤器,在所有的眼睛上放一个嘴巴的表情符号()。为了找到眼睛的地标,我们需要另一个模型。这一次,我们关心的是准确性,所以我们使用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 上进行人脸检测

 


使用 Face-api.js 在 Web 上进行人脸检测

 

总结

Face-api.js是一个伟大的库,它使人脸检测和识别变得非常容易。不需要熟悉机器学习和神经网络的知识。我喜欢那些可以使用的工具,而这绝对是其中之一。

根据我的经验,Web 上的人脸识别会影响性能。我们必须在带宽和性能或准确性之间做出选择。较小的模型肯定不太准确,并且会在我之前提到的一些因素中遗漏人脸,例如光线不足或面部被面具覆盖时。

Microsoft Azure、google Cloud 和其他可能的企业都在云中提供人脸检测。因为我们避免下载大模型,基于云的检测避免了繁重的页面加载,随着它的频繁改进往往更准确,并且由于优化的硬件甚至可能更快。如果您需要高精度,您可能需要研究一个您满意的计划。

我绝对推荐你在业余项目、实验中使用face-api.js,也许还可以用来做MVP。



Tags:Face-api.js   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
Web 浏览器日益强大,网站和 Web 应用程序的复杂性也在增加。几十年前需要超级计算机的操作现在可以在智能手机上运行,其中之一就是人脸检测。检测和分析人脸的能力非常有用,因...【详细内容】
2021-08-20  Tags: Face-api.js  点击:(105)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(5)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(19)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(18)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(34)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(35)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(38)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== '') { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(50)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条