视频解析图片识别人脸采集并切图video-clip-image

采集视频中的人脸并截取

• 本Demo是通过face-api实现的。具体内容可前往Github：face-api
• 注： 返回大部分使用的都是base64
• Demo地址放在了码云上：video-clip-images

目录结构

video-clip-images/
├── face-api.js-master/
│   ├── weights/ 模型
│   │   └── ...
├── js/ 脚本
│   └── ...
└── index.html

第一步加载模型

await faceapi.nets.tinyFaceDetector.loadFromUri(
    "./face-api.js-master/weights"
);

第二步 通过传入的url 获取每一秒的图片

  async getVideoFace(url) {
    const video = document.createElement("video");
    const canvas = document.createElement("canvas");
    video.src = url;
    await new Promise((resolve) => {
      video.addEventListener("loadedmetadata", () => {
        resolve();
      });
    });
    const duration = video.duration;
    const ctx = canvas.getContext("2d");
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const frameData = [];
    for (let i = 0; i < duration; i++) {
      video.currentTime = i;
      await new Promise((resolve) => {
        video.addEventListener("seeked", function handler() {
          video.removeEventListener("seeked", handler);
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
          const base64 = canvas.toDataURL("image/jpeg");
          frameData.push({
            base64,
            second: i,
          });
          resolve();
        });
      });
    }

    return frameData;
  }

第三步 处理每一秒的图片并裁剪

• detectFrame获取人物在图中的位置
• getClipImage获取裁剪后的图片

    getClipImage(box, image) {
    const newCanvas = document.createElement("canvas");
    const newCtx = newCanvas.getContext("2d");
    newCanvas.width = box.width;
    newCanvas.height = box.height;
    newCtx.drawImage(
      image,
      box.x,
      box.y,
      box.width,
      box.height,
      0,
      0,
      box.width,
      box.height
    );
    const base64Data = newCanvas.toDataURL("image/png");
    let img = document.createElement("img");
    img.src = base64Data;
    return base64Data;
   }
  

• 通过第二步获取的data使用detectFrame获取box
• 通过filter过滤box为空也就是没有获取到人脸。
• 最后使用getClipImage获取到裁剪后的图片

  async install(url) {
    let data = await this.getVideoFace(url);
    const detectFrame = async (img) => {
      let box;
      const detections = await faceapi.detectAllFaces(
        img,
        new faceapi.TinyFaceDetectorOptions()
      );
      detections.forEach((detection) => {
        box = detection.box;
      });
      return box;
    };
    data = data.map((item) => {
      return new Promise((resolve, reject) => {
        let img = new Image();
        img.onload = async () => {
          item.box = await detectFrame(img);
          item.img = img;
          resolve(item);
        };
        img.src = item.base64;
      });
    });
    data = await Promise.all(data);
    console.log(`本次处理耗时：${this.numb}秒`);
    clearInterval(this.time);
    return data
      .filter((i) => Boolean(i.box))
      .map((item) => {
        item.clipImage = this.getClipImage(item.box, item.img);
        return item;
      });
  }

报告！菜坤后端要Blob

• 把它工资分我一份！！！！！
• 处理裁剪好的base64base64ToBlob(item.clipImage)

    new ClipImages("./2025419-450082.mp4").then((data) => {
        data.forEach((item) => {
          let img = document.createElement("img");
          img.src = item.clipImage;
          document.body.appendChild(img);
          item.clipImageBlob = base64ToBlob(item.clipImage)
        });
        console.log(data);
    });
  

• base64ToBlob代码片段

  function base64ToBlob(base64, contentType = "image/png") {
    // 去掉 Base64 编码字符串的前缀
    const sliceIndex = base64.indexOf(",") + 1;
    const base64Data = base64.slice(sliceIndex);
  
    // 解码 Base64 数据
    const binary = atob(base64Data);
    const length = binary.length;
    const buffer = new ArrayBuffer(length);
    const view = new Uint8Array(buffer);
  
    // 将二进制字符串转换为 Uint8Array
    for (let i = 0; i < length; i++) {
        view[i] = binary.charCodeAt(i);
    }
  
    // 创建 Blob 对象
    return new Blob([view], { type: contentType });
  }
  

效果图