本文向大家介绍了用JavaScript实现的人脸检测方法，内容非常详细。感兴趣的朋友可以参考一下，希望对你有所帮助。
我一直对视频和图片中的人脸标记、检测和人脸识别技术很感兴趣。虽然我知道获取逻辑和算法来开发人脸识别软件或插件超出了我的想象。当我知道Javascript库可以识别微笑、眼睛和脸的结构时，我受到了启发，写了一篇教程。有许多库，要么是纯粹基于javascript的，要么是基于Java的。
今天，我们开始学习tracking.js，这是一个来自Eduardo Lundgren开发的,的轻量级javascript库，它允许你进行实时人脸检测、颜色跟踪和标记朋友的脸。在本教程中，我们将看到如何从静止图片中检测人脸、眼睛和嘴巴。
您可以看到一个教程，其中提供了一个可以使用的示例。这个例子有技巧和更多的技术细节。
首先，我们需要构建一个项目，从github下载项目并提取构建文件夹，并根据您的文件和目录结构放置构建文件夹。在本教程中，我使用了以下文件和目录结构。
文件夹结构
项目index.html资产face.jpgjs跟踪-min . jsdataeye-min . jseye . jsface . jsmouth-min . jsmouth以下是index.html的html代码。
HTML代码
！doctypehtmlhtmltownetacharset=' utf-8 ' title @ TutsFacedetectionTourial/title scriptsrc=' js/tracking-min . js '/script src=' js/data/face-min . js '/script script src=' js/data/eye-min . js '/script script src=' js/data/mouth-min . js '/script style . rect { bord
r: 2px solid #a64ceb; left: -1000px; position: absolute; top: -1000px; } #img { position: absolute; top: 50%; left: 50%; margin: -173px 0 0 -300px; } </style> </head> <body> <div class="imgContainer"> <img id="img" src="assets/face.jpg" /> </div> </body> </html>
在上面的HTML代码中，我们引入4个javascript来自于tracking.js的文件，这些文件有助于我们从图片中检测人脸、眼睛和嘴巴。现在我们写一段代码来实现从静态图片中检测人脸，眼睛和嘴巴。我故意选用这张图片，因为这张图片中有多张不同表情和姿势脸。
为了达成目标，我们需要修改html文件头部的代码。
HTML 代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>@tuts Face Detection Tutorial</title> <script src="js/tracking-min.js"></script> <script src="js/data/face-min.js"></script> <script src="js/data/eye-min.js"></script> <script src="js/data/mouth-min.js"></script> <style> .rect { border: 2px solid #a64ceb; left: -1000px; position: absolute; top: -1000px; } #img { position: absolute; top: 50%; left: 50%; margin: -173px 0 0 -300px; } </style> // tracking code. <script> window.onload = function() { var img = document.getElementById('img'); var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']); // Based on parameter it will return an array. tracker.setStepSize(1.7); tracking.track('#img', tracker); tracker.on('track', function(event) { event.data.forEach(function(rect) { draw(rect.x, rect.y, rect.width, rect.height); }); }); function draw(x, y, w, h) { var rect = document.createElement('div'); document.querySelector('.imgContainer').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> </head> <body> <div class="imgContainer"> <img id="img" src="assets/face.jpg" /> </div> </body> </html>
结果
代码说明.
-
tracking.ObjectTracker() 方法对你想要进行跟踪的对象进行了分类，它可以接受一个数组作为参数.
-
setStepSize() 指定的块的步进大小.
-
我们将要跟踪的对象绑定上 “track” 事件, 对象一被跟踪，很快正在跟踪的对象就会触发跟踪事件.
-
我们以对象数组的形式中获取数据，里面有每个对象（脸部，嘴部很眼部）的宽度，高度 , x 和 y 坐标;
注意：由于浏览器安全性的原因，这个程序需要运行在一样的域或者禁用网络安全的浏览器中。
关于JavaScript实现的人脸检测方法是怎样的就分享到这里了，希望
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/98441.html