js人脸识别，tracker.js前端人脸识别框架
生活随笔
收集整理的這篇文章主要介紹了
js人脸识别，tracker.js前端人脸识别框架
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!doctype html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>基于tracking的取人臉</title>
? ? <script src="js/tracking-min.js"></script>
? ? <script src="js/face-min.js"></script>
? ? <script src="js/eye-min.js"></script>
? ? <script src="js/mouth-min.js"></script>
? ? <script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="face" style="border:1px solid yellow;position:absolute;display:none;"></div>
<img id="img" src="https://img-blog.csdnimg.cn/2022010614020738216.jpeg" alt=""/>
<script>
? ? // ? ? ? ?tracking.ObjectTracker()接受數(shù)組參數(shù)將你想要標記的對象分類（比如臉部整體、眼睛、鼻子、嘴巴等）。
? ? // ? ? ? ?setStepSize()規(guī)定用來標記的方框的步長。
? ? // ? ? ? ?我們把要標記的對象和track事件進行綁定，一旦我們要標記的對象完成初始化，就會觸發(fā)track事件。
? ? // ? ? ? ?數(shù)據(jù)（Data）保存在對象數(shù)組列表中，其中的值是每一個標記對象的長、寬以及x、y坐標。
? ? window.onload = function () {
? ? ? ? var img = document.getElementById('img');
? ? ? ? var tracker = new tracking.ObjectTracker(['face']); // Based on parameter it will return an array.
? ? ? ? // tracker.setStepSize(1.7);
? ? ? ? tracking.track('#img', tracker);
? ? ? ? tracker.on('track', function (event) {
? ? ? ? ? ? if (event.data.length === 0) {
? ? ? ? ? ? ? ? alert("無人臉")
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? var count = 0;
? ? ? ? ? ? ? ? event.data.forEach(function (rect) {
// ? ? ? ? ? ? ? ? ? ? ? ?console.log(event)
? ? ? ? ? ? ? ? ? ? console.log(rect)
? ? ? ? ? ? ? ? ? ? draw(rect.x, rect.y, rect.width, rect.height);
? ? ? ? ? ? ? ? ? ? ? ?// alert("有人臉")
? ? ? ? ? ? ? ? ? ? count++;
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? console.log("識別到人臉數(shù)量：" + count);
? ? ? ? ? ? }
? ? ? ? });
? ? ? ? //畫方框
? ? ? ? function draw(x, y, w, h) {
? ? ? ? ? ? var face = $(".face").clone(true);
? ? ? ? ? ? face.css({"width":w+"px","height":h+"px","left":(img.offsetLeft + x)+"px","top":(img.offsetTop + y)+"px"});
? ? ? ? ? ? face.removeClass("face");
? ? ? ? ? ? face.show();
? ? ? ? ? ? $("#img").before(face);
? ? ? ? }
? ? }
</script>
</body>
</html>
demo下載地址：https://pan.baidu.com/s/1yjMz7Yir2dB77wvYiYvu_g
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>基于tracking的取人臉</title>
? ? <script src="js/tracking-min.js"></script>
? ? <script src="js/face-min.js"></script>
? ? <script src="js/eye-min.js"></script>
? ? <script src="js/mouth-min.js"></script>
? ? <script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="face" style="border:1px solid yellow;position:absolute;display:none;"></div>
<img id="img" src="https://img-blog.csdnimg.cn/2022010614020738216.jpeg" alt=""/>
<script>
? ? // ? ? ? ?tracking.ObjectTracker()接受數(shù)組參數(shù)將你想要標記的對象分類（比如臉部整體、眼睛、鼻子、嘴巴等）。
? ? // ? ? ? ?setStepSize()規(guī)定用來標記的方框的步長。
? ? // ? ? ? ?我們把要標記的對象和track事件進行綁定，一旦我們要標記的對象完成初始化，就會觸發(fā)track事件。
? ? // ? ? ? ?數(shù)據(jù)（Data）保存在對象數(shù)組列表中，其中的值是每一個標記對象的長、寬以及x、y坐標。
? ? window.onload = function () {
? ? ? ? var img = document.getElementById('img');
? ? ? ? var tracker = new tracking.ObjectTracker(['face']); // Based on parameter it will return an array.
? ? ? ? // tracker.setStepSize(1.7);
? ? ? ? tracking.track('#img', tracker);
? ? ? ? tracker.on('track', function (event) {
? ? ? ? ? ? if (event.data.length === 0) {
? ? ? ? ? ? ? ? alert("無人臉")
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? var count = 0;
? ? ? ? ? ? ? ? event.data.forEach(function (rect) {
// ? ? ? ? ? ? ? ? ? ? ? ?console.log(event)
? ? ? ? ? ? ? ? ? ? console.log(rect)
? ? ? ? ? ? ? ? ? ? draw(rect.x, rect.y, rect.width, rect.height);
? ? ? ? ? ? ? ? ? ? ? ?// alert("有人臉")
? ? ? ? ? ? ? ? ? ? count++;
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? console.log("識別到人臉數(shù)量：" + count);
? ? ? ? ? ? }
? ? ? ? });
? ? ? ? //畫方框
? ? ? ? function draw(x, y, w, h) {
? ? ? ? ? ? var face = $(".face").clone(true);
? ? ? ? ? ? face.css({"width":w+"px","height":h+"px","left":(img.offsetLeft + x)+"px","top":(img.offsetTop + y)+"px"});
? ? ? ? ? ? face.removeClass("face");
? ? ? ? ? ? face.show();
? ? ? ? ? ? $("#img").before(face);
? ? ? ? }
? ? }
</script>
</body>
</html>
demo下載地址：https://pan.baidu.com/s/1yjMz7Yir2dB77wvYiYvu_g
總結
以上是生活随笔為你收集整理的js人脸识别，tracker.js前端人脸识别框架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 简单理解t检验与秩和检验
- 下一篇： 【软考 系统架构设计师】软件架构设计④