vue基于face-api.js实现人脸识别

import * as faceapi from "face-api.js";

// 初始化
async init() {
    const modelsPath = "/weights";
    // 加载模型 
    await faceapi.nets.ssdMobilenetv1.loadFromUri(modelsPath);
    await faceapi.nets.faceLandmark68Net.loadFromUri(modelsPath);
    await faceapi.nets.faceRecognitionNet.loadFromUri(modelsPath);
}



// 校验当前图片信息
let checkPicture = async (base64Str) => {
  // console.log('收到的base64文本', base64Str);
  let val = base64Str;
  const byteCharacters = window.atob(val.replace(/^data:image\/\w+;base64,/, ""));
  const byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  const blob = new Blob([byteArray], { type: "image/jpeg" });

  const img = await faceapi.bufferToImage(blob);

  // 进行人脸检测
  const detection = await faceapi.detectSingleFace(img).withFaceLandmarks();

  if (detection) {
    // 存在检测到的人脸
    const detections = await faceapi.detectAllFaces(img).withFaceLandmarks();

    let done = false

    detections.forEach((element) => {
      const { landmarks } = element;
      const leftEye = landmarks.getLeftEye()[0];
      const rightEye = landmarks.getRightEye()[3];
      const mouth = landmarks.getMouth();

      const imageWidth = img.width;
      const imageHeight = img.height;
      if (
        (leftEye.x < imageWidth / 3 && rightEye.x < imageWidth / 3) || // 左右眼位于图像左侧
        (leftEye.x > (2 * imageWidth) / 3 && rightEye.x > (2 * imageWidth) / 3) || // 左右眼位于图像右侧
        (mouth[0].y < imageHeight / 3 && mouth[6].y < imageHeight / 3) || // 嘴巴位于图像上方
        (mouth[0].y > (2 * imageHeight) / 3 && mouth[6].y > (2 * imageHeight) / 3) // 嘴巴位于图像下方
      ) {
        console.log("半张人脸");
        done = true
        return
      } else {
        console.log("完整人脸");
        done = true
        return
      }
    });
    return done
  } else {
    // 未检测到人脸
    console.log("图片不包含人脸");
    return false;
  }
}


// 剪裁照片上传之后判断照片是否是通过校验的
let confirmClipping = async () => {
  let clipBase = cropper.getDataURL()
  pageData.isShowModel = false
  submitData.file = clipBase
  submitData.base64 = clipBase
  // console.log('剪裁之后的文本', submitData.base64);
  pageData.isShowLoading = true
  let done = await checkPicture(submitData.base64)
  pageData.isShowLoading = false
  console.log('人脸校验是否通过', done);
  if (!done) {
    resetCliapHandler()
    ElMessage.error("请上传五官清晰照片")
  }
  resetFileInput()
}