vue+JavaScript利用tracker.js开发一个人脸自动识别

项目需要用到用户通过人脸上传到后台存储来完成一些特殊操作

思考 既然需要实时捕获  那么就需要用到video和canvas配合来做实时捕获和截取图片使用  配合上tracking.js的识别功能 分出以下几个模块

项目是基于vue 首先需要引入四个用到的模块  注：如果你的请求不是JQUERY  请无视 这是我拿来做测试用

 

 

 

写上几个我们需要用到的标签模块 分别为video canvas 和做预览用的img标签

 

 

代码:

 

<template>
  <div>
    <div class="trackTitle">
      <h3>{{ trackTitle }}</h3>
    </div>
    <div class="trackFaceBox">
      <!-- 摄像头 -->
      <div class="videoBox">
        <video autoplay playsinline ref="video" id="video"></video>
      </div>
      <!-- canvas摄像头实时预览 -->
      <canvas id="canvas" width="350" height="400"></canvas>
    </div>
    <!-- 预览图片 -->
    <img :src="photo" />
  </div>
</template>

　　

 

主要模块和标签都写好了之后 思考一下 首先肯定需要在页面渲染完成之后开启摄像头和实时获取canvas内容   写一个初始化方法:

 

 

代码:

// 开启摄像头识别
    openCamera() {
      this.video = document.getElementById("video");
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");

      const tracker = new window.tracking.ObjectTracker("face");
      tracker.setStepSize(1);
      // 识别率
      tracker.setEdgesDensity(0.08);
      tracker.setInitialScale(5);
      this.trackerTask = window.tracking.track("#video", tracker, {
        camera: true,
      });
      tracker.on("track", (event) => {
        context.clearRect(0, 0, canvas.width, canvas.height);
        let text = "请将人脸置放在识别处";
        let ret = {};
        const that = this;
        event.data.forEach(function (rect) {
          if (rect.x > 0) {
            that.saveImage();
            return (text = "已识别到人脸，请点击拍照"), (ret = rect);
          }
          // context.strokeStyle = "red";
          // context.strokeRect(rect.x, rect.y, rect.width, rect.height);
        });
        this.ret = ret;
        this.trackTitle = text;
      });
    },

在tracker.on识别的时候 会有一个循环体 如果找到人脸之后 我们要结束这个循环 不要让循环体继续 对应代码

 

 

 当这个的rect.x 也就是对应着出现识别框的时候 他的x轴是不为空的 所以他对应的会存在识别完成

之后再进行return 就结束识别了 但不是真的结束识别了 只是我们结束了这次识别的照片

之后 识别完成 就进行图片截取 如下:

 

 

 代码:

 

 // 获取到人脸后拍照保存到maryimgae
    saveImage() {
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext("2d");
      console.log(this.video);
      canvas.width = this.ret.width;
      canvas.height = this.ret.height;
      ctx.drawImage(
        this.video,
        this.ret.x,
        this.ret.y,
        this.ret.width + 100,
        this.ret.height + 200,
        0,
        0,
        this.ret.width,
        this.ret.height
      );
      // 获取图片base64链接
      var image = canvas.toDataURL("image/jpg");
      canvas.toBlob(async (blob) => {
        console.log(blob);
        // alert(JSON.stringify(blob));
        // alert(URL.createObjectURL(blob));
        // 此处写上传到后台的接口即可
      });
      this.photo = image;
    },

　　这样就完成了识别人脸到图片截取的整个过程 下面放手机预览图