<!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()接受数组参数将你想要标记的对象分类（比如脸部整体、眼睛、鼻子、嘴巴等）。
// setStepSize()规定用来标记的方框的步长。
// 我们把要标记的对象和track事件进行绑定，一旦我们要标记的对象完成初始化，就会触发track事件。
// 数据（Data）保存在对象数组列表中，其中的值是每一个标记对象的长、宽以及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("识别到人脸数量：" + 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()接受数组参数将你想要标记的对象分类（比如脸部整体、眼睛、鼻子、嘴巴等）。
// setStepSize()规定用来标记的方框的步长。
// 我们把要标记的对象和track事件进行绑定，一旦我们要标记的对象完成初始化，就会触发track事件。
// 数据（Data）保存在对象数组列表中，其中的值是每一个标记对象的长、宽以及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("识别到人脸数量：" + 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
1096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
