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。