一个针对图像中的人脸进行识别的底层加速平台组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.img,
.canvas {
width: 320px;
}
</style>
</head>
<body>
<img src="./people.jpg" alt="" class="img" hidden />
<hr />
<canvas class="canvas"></canvas>
<script>
init();
function init() {
if (!Reflect.has(globalThis, 'FaceDetector')) {
document.body.innerHTML = `<h1>不支持人脸检测</h1>`;
return;
}
const img = document.querySelector('.img');
/** @type {HTMLCanvasElement} */
const canvas = document.querySelector('.canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.save();
const faceDetector = new FaceDetector({
fastMode: true /* 是否开启速度优先（于精确度）模式，将通过更小的比例尺（更靠近目标图形）或寻找更大的目标图形的办法进行识别 */,
maxDetectedFaces: 5 /* 当前场景中已识别的人脸数的最大值 */,
});
faceDetector
.detect(canvas)
.then((faces) => {
console.log(faces);
ctx.lineWidth = 3;
ctx.strokeStyle = 'yellow';
faces.forEach((face) => {
const { x, y, width, height } = face.boundingBox;
ctx.beginPath();
ctx.rect(x, y, width, height);
ctx.stroke();
});
ctx.closePath();
})
.catch((error) => {
console.log(error);
});
}
</script>
</body>
</html>