detectAllFaces() 方法無法識別 face-api.js 中的任何人臉

Question

我正在使用face-api.js Javascript API 開發一個 web 應用程序，用戶上傳她/他的照片，我們想檢測照片中的人臉。

這是我的 HTML 代碼：

<input type="file" id="user_pic" accept="image/x-png,image/gif,image/jpeg">
<img src="images/250x250.webp" id="preview" alt="">

下面的代碼是我寫給人臉檢測的：

document.addEventListener('DOMContentLoaded', function() {
    run()
});

async function run() {
    // load the models
    await faceapi.loadMtcnnModel('../faceapi_models')
    await faceapi.loadFaceRecognitionModel('../faceapi_models')
}


const user_pic = document.getElementById('user_pic')
const preview = document.getElementById('preview')

user_pic.addEventListener('change', () => {
    const reader = new FileReader()
    reader.onload = (e) => {
        preview.src = e.target.result
    }
    reader.readAsDataURL(user_pic.files[0]);

    detectFaces(user_pic.files[0])
})

preview.onclick = () => user_pic.click()


async function detectFaces(input) {

    let imgURL = URL.createObjectURL(input)

    const imgElement = new Image()
    imgElement.src = imgURL

    const results = faceapi.detectAllFaces(imgElement)
        .withFaceLandmarks()
        .withFaceExpressions()
    console.log(results)

    results.forEach(result => {
        const { x, y, width, height } = result.detection.box;
        ctx.strokeRect(x, y, width, height);
    });

}

現在，每當我 select 圖像results變量為空時，就會發生此錯誤：

Uncaught (in promise) TypeError: results.forEach is not a function

Answer 1

withFaceExpressions()方法是async的。 您應該使用await或then() 。

供參考的文檔

使用等待

const results = await faceapi.detectAllFaces(imgElement)
   .withFaceLandmarks()
   .withFaceExpressions();

使用then()

faceapi.detectAllFaces(imgElement)
   .withFaceLandmarks()
   .withFaceExpressions()
   .then( results => {
      results.forEach(result => {
        const { x, y, width, height } = result.detection.box;
        ctx.strokeRect(x, y, width, height);
      });
   });