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

最新推荐文章于 2022-11-14 22:03:30 发布

allway2

最新推荐文章于 2022-11-14 22:03:30 发布

阅读量871

点赞数

文章标签： html5 javascript html

本文链接：https://blog.csdn.net/allway2/article/details/120725669

版权

<!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>