在基于JavaScript的面部地标检测中查找所有点的坐标

Question

我必须使用JavaScript编程语言检测面部标志。为此，我看过这个视频教程。此外，我能够成功地执行上提供的视频代码。现在我已经显示了每个面部标志点的坐标值。我有以下用于面部标志检测的代码：

video.addEventListener('play', () => {
const canvas = faceapi.createCanvasFromMedia(video)
document.body.append(canvas)
const displaySize = { width: video.width, height: video.height }
faceapi.matchDimensions(canvas, displaySize)
setInterval(async () => {
const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions()
const resizedDetections = faceapi.resizeResults(detections, displaySize)
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
faceapi.draw.drawDetections(canvas, resizedDetections)
faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)
faceapi.draw.drawFaceExpressions(canvas, resizedDetections)
}, 100)
})

请建议我应该如何访问面部标志点的坐标。

Answer 1

您可以尝试此代码来获取调整尺寸的地标：

video.addEventListener('play', () => {
const canvas = faceapi.createCanvasFromMedia(video)
document.body.append(canvas)
const displaySize = { width: video.width, height: video.height }
faceapi.matchDimensions(canvas, displaySize)
setInterval(async () => {
const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks()
const resizedDetections = faceapi.resizeResults(detections, displaySize)
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)

//parsing the landmarks correctly
var landmarks = resizedDetections[0]['landmarks']._positions;

//adding canvas to draw over the face
var ctx = canvas.getContext("2d");

//looping over landmarks to draw the canvas
for (var i = 0; i < landmarks.length; i++) {
var x_val = landmarks[i]._x;
var y_val = landmarks[i]._y;
ctx.beginPath();
console.log(x_val);
console.log(y_val);
ctx.arc(x_val, y_val, 2, 0, Math.PI*2, false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
}


}, 100)
})