什么是 face-detector-polyfill
face-detector-polyfill 是一个 JavaScript 库，用于检测浏览器是否支持 window.FaceDetector API。如果浏览器不支持，该库会自动加载 face-api.js 或 tracking.js 作为 polyfill 进行使用，从而让网页应用能够在不同浏览器中实现人脸检测功能。
安装 face-detector-polyfill
可以直接使用 npm 安装 face-detector-polyfill：
npm install --save face-detector-polyfill
如何使用 face-detector-polyfill
1. 导入 face-detector-polyfill
在需要使用 face-detector-polyfill 的页面或模块中，首先导入 face-detector-polyfill：
import faceDetectorPolyfill from 'face-detector-polyfill';
2. 创建 FaceDetector 对象
在页面或模块中创建 FaceDetector 对象，并通过 faceDetectorPolyfill.detectFaces() 方法对图像进行人脸检测：
const img = document.querySelector('img');
const faceDetector = new window.FaceDetector();
faceDetector.detect(img).then(faces => {
console.log('检测结果：', faces);
});3. 检测结果
faceDetector.detect() 方法返回一个 Promise 对象，当人脸检测完成后，Promise 对象会 resolve 成一个包含所有检测出的人脸数组。
每个人脸对象包含以下属性：
boundingBox：人脸在图像中的位置和尺寸（类型为 DOMRect）。landmarks：人脸特征点的位置数组。suggestions：人脸检测器对人脸位置和角度的建议。
例如，可以按以下方式输出每个已检测到的人脸的位置和数量：
faceDetector.detect(img).then(faces => {
console.log(`总共检测到 ${faces.length} 个人脸：`);
faces.forEach((face, i) => {
console.log(`第 ${i+1} 个人脸位置：`, face.boundingBox);
});
});示例代码
以下代码演示了如何使用 face-detector-polyfill 进行人脸检测。
HTML 代码：
-- -------------------- ---- -------
--------- -----
------
------
----------------------------- ------------
-------
------
---- -------------- ---------- ----------
------- ------------------------
-------
-------JavaScript 代码：
-- -------------------- ---- -------
------ -------------------- ---- -------------------------
----- --- - --------------------------------
----- ------------ - --- ----------------------
----------------------------------- -- -
------------------ --------------- -------
-------------------- -- -- -
-------------- ------ -------- ------------------
---
---总结
使用 face-detector-polyfill 可以轻松地实现人脸检测功能，并且无需担心浏览器的兼容性问题。在需要使用人脸检测的应用中，它是一个非常有用的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aef81e8991b448d896c