vue结合tracking.js，实现web端人脸识别功能

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <div class="testTracking">
    <video id="video" width="318" height="270" preload autoplay loop muted></video>
    <canvas id="canvas" width="318" height="270"></canvas>
    <img :src="dataUrl" alt="" id="img1">
    <div class="buttonDiv">
      <button type="button" @click="submit">上传照片</button>
      <button type="button" name="button" @click="openCamera">点击我拍照</button>
    </div>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<script>
  import '../assets/js/tracking-min';
  import '../assets/js/face-min.js';
  import '../assets/js/dat.gui.min.js';
  import '../assets/js/stats.min';
  
  export default {
    name: 'testTracking',
    data () {
      return {
        dataUrl: '',
        x:0,
        y:0,
        h:0,
        w:0,
      }
    },
    mounted () {
      this.openCamera()
    },
    methods: {
      openCamera () {
        var video = document.getElementById('video');
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        let vm = this;
  
        var tracker = new tracking.ObjectTracker('face');
        this.lalala = tracker;
        tracker.setInitialScale(4);
        tracker.setStepSize(2);
        tracker.setEdgesDensity(0.1);
  
        this.trackerTask = tracking.track('#video', tracker, {camera: true});
  
        tracker.on('track', function(event) {
          context.clearRect(0, 0, canvas.width, canvas.height);
  
          event.data.forEach(function(rect) {
            if(event.data.length >0){
              context.strokeStyle = '#a64ceb';
              context.strokeRect(rect.x, rect.y, rect.width, rect.height);
              context.font = '11px Helvetica';
              context.fillStyle = "#fff";
              context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
              context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
  
              vm.x=  rect.x;
              vm.y= rect.y;
              vm.w= rect.width ;
              vm.h=  rect.height ;
            }
          });
        });
      },
      submit () {
        let that = this
        let canvas = document.getElementById('canvas')
        let context = canvas.getContext('2d')
        let video = document.getElementById('video')
  
        setTimeout(function () {
          context.drawImage(video, (that.x + that.w), (that.y + that.h), (that.x + that.w), (that.y + that.h),(that.x), that.y,(that.w ), (that.h));
          let dataUrl = canvas.toDataURL('image/png');
          console.log(dataUrl)
          that.dataUrl = dataUrl;
        }, 1000)
      }
    },
    destroyed () {
      // 停止侦测
      this.trackerTask.stop()
      // 关闭摄像头
      this.trackerTask.closeCamera()
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style lang="less" scoped>
  .testTracking {
    height: 100vh;
    width: 100%;
    position: relative;
  
    > * {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
    }
  
    > img {
      bottom: 124px;
    }
  
    video, canvas {
      top: 0;
    }
    canvas{
     position: absolute;
     z-index: 22;
    }
    .buttonDiv {
      bottom: 10px;
    }
    #img1{
      position: absolute;
      z-index: 33;
    }
  }

</style>

1
2
  context.drawImage(video, (that.x + that.w), (that.y + that.h), (that.x + that.w), (that.y + that.h),(that.x), that.y,(that.w ), (that.h));