tracking.js示例 - 浏览器中检测图像中的人脸

水深无声 2023-10-02 11:27 13阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <script src="./build/tracking-min.js"></script>
      <script src="./build/data/face-min.js"></script>
      <script src="./build/data/mouth-min.js"></script>
      <script src="./build/data/eye-min.js"></script>
      <style>
        .rect {
          border: 2px solid #a64ceb;
          left: -1000px;
          position: absolute;
          top: -1000px;
        }
    
        .demo-container {
          width: 100%;
          height: 530px;
          position: relative;
          background: #eee;
          overflow: hidden;
          border-bottom-right-radius: 10px;
          border-bottom-left-radius: 10px;
        }
    
      </style>
    </head>
    
    <body>
      <div class="demo-container">
        <img src="./imgs/2.png" alt="" id="img">
      </div>
    
      <script>
        window.onload = function () {
    
          // 创建追踪识别对象
          var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
          // 设置 追踪识别的图片
          tracking.track('#img', tracker);
          // 监听追踪事件
          tracker.on('track', function (event) {
            console.log(event.data);
            // 获取追踪数据
            event.data.forEach(function (rect) {
              window.plot(rect.x, rect.y, rect.width, rect.height);
            });
          });
    
          window.plot = function (x, y, w, h) {
            var img = document.querySelector('#img')
            var rect = document.createElement('div');
            document.querySelector('.demo-container').appendChild(rect);
            rect.classList.add('rect');
            rect.style.width = w + 'px';
            rect.style.height = h + 'px';
            rect.style.left = (img.offsetLeft + x) + 'px';
            rect.style.top = (img.offsetTop + y) + 'px';
          };
        }
    
      </script>
    
    </body>
    
    </html>