tracking.js 人脸识别（在照片上画框框）_tracking.objecttracker()-CSDN博客

本文链接：https://blog.csdn.net/ichigshinyaa/article/details/127856377

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FACE1</title>
    <link rel="stylesheet" href="assets/demo.css">
    <script src="../build/tracking.js"></script>
    <script src="../build/data/eye.js"></script>
    <script src="../build/data/mouth.js"></script>
    <script src="../build/data/face.js"></script>
    <style>
        .rect {
            border: 2px solid #a64ceb;
            left: -1000px;
            position: absolute;
            top: -1000px;
        }
        
        #img {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -200px 0 0 -200px;
        }
    </style>
</head>

<body>
    <div class="demo-container">
        <img id="img" src="standard.jpg" />
    </div>
    <script>
        window.onload = function() {
            var img = document.getElementById('img');
            var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
            tracker.setStepSize(1.5);
            tracker.on('track', function(event) {
                if (event.data.length === 0) {} else {
                    event.data.forEach(function(rect) {
                        console.log('yes');
                        var div1 = document.createElement('div');
                        document.querySelector('.demo-container').appendChild(div1);
                        div1.classList.add('rect');
                        div1.style.width = rect.width + 'px';
                        div1.style.height = rect.height + 'px';
                        div1.style.left = (img.offsetLeft + rect.x) + 'px';
                        div1.style.top = (img.offsetTop + rect.y) + 'px';
                    })
                }
            });
            tracking.track(img, tracker);
        }
    </script>
</body>

</html>

在网上看过很多tracking.js实践，但最开始我是看不懂的，慢慢琢磨才看懂代码，所以我希望写一个最简洁、最简单的tracking.js人脸识别实践。

先放我一个小时研究出来的事情，基本把官网代码删减到了最简。

实现结果如下图所示：