使用Java脚本语言实现的人脸检测

我一直对视频和图片中的人脸标记、检测和人脸识别技术很感兴趣。尽管我知道获取逻辑和算法去开发人脸识别软件或者插件已经超出了我的想象。当我知道爪哇岛描述语言库可以识别微笑，眼睛和脸部结构时，我得到启发去写一个教程。有许多的库，这些库要不就是纯粹的基于爪哇岛描述语言的，要不就是基于爪哇岛语言的。

今天，我们开始学习tracking.js，它是一个由爱德华多伦德格伦开发的轻量级的爪哇岛描述语言库，它可以让你做实时的人脸检测，色彩追踪和标记好友的脸。在这个教程中，我们将会看到，我们如何从静态图片中检测脸，眼睛和嘴巴。在教程的最后，你可以看到一个教程提供可以用的例子，这个例子有技巧和提示以及更多的技术细节。

首先，我们需要建立一个工程，从开源代码库中下载这个工程并且抽取建设文件夹，根据你的文件和目录结构放置建设文件夹。在这个教程里，我用了如下的文件和目录结构。

文件夹结构

项目文件夹index.htmlassetsface.jpgjs跟踪-闵。js >跟踪。js data眼-闵。射流研究…眼。射流研究…脸-闵。射流研究…脸。射流研究…嘴-闵。射流研究…嘴。射流研究…你可以看到射流研究…文件夹里有我们从tracking.js中抽取的爪哇岛描述语言文件。下面是index.html的超文本标记语言代码。

超文本标记语言代码

！doctype html html head meta charset=' utf-8 ' title @ tuts Face Detection Tutorial/title script src=' http : js/tracking-min。js '/script script src=' http : js/data/Face-min。js '/script script src=' http : js/data/mouth-min。js '/脚本风格.rect { border : 2px solid # a64 CEB；左侧：-1000像素；绝对位置：top :-1000 px；} # img { position : absolute top : 50%；左侧： 50%;边距：-173像素0-300像素；}/style/head dydiv class=' imgContainer ' img id=' img ' src=' http : assets/face。jpg '/div/body/html在上面的超文本标记语言代码中，我们引入四个爪哇岛描述语言来自于tracking.js的文件，这些文件有助于我们从图片中检测人脸、眼睛和嘴巴。现在我们写一段代码来实现从静态图片中检测人脸，眼睛和嘴巴。我故意选用这张图片，因为这张图片中有多张不同表情和姿势脸。

为了达成目标，我们需要修改超文本标记语言文件头部的代码。

超文本标记语言代码

！doctype html html head meta charset=' utf-8 ' title @ tuts Face Detection Tutorial/title script src=' http : js/tracking-min。js '/script script src=' http : js/data/Face-min。js '/script script src=' http : js/data/mouth-min。js '/脚本风格.rect { border : 2px solid # a64 CEB；左侧：-1000像素；绝对位置：top :-1000 px；} # img { position : absolute top : 50%；左侧： 50%;边距：-173像素0-300像素；}/style//跟踪代码。脚本窗口。onload=function(){ var img=document。getelementbyid(' img ')；var跟踪器=新跟踪ObjectTracker(['脸','眼','嘴']);//根据参数，它将返回一个数组跟踪器。setstep size(1.7)；tracking.track('#img '，tracker)；tracker.on('track '，function(event){ event。数据。foreach(function(rect){ draw(rect。x，矩形，矩形，宽度，矩形。高度)；});});函数draw(x，y，w，h){ var rect=document。创建元素(' div ')；document.querySelector(' .imgContainer ').appendChild(rect)；rect。班级名单。add(' rect ')；rect。风格。宽度=w ' pxrect。风格。高度=h ' pxrect。风格。左=(img。offset left x)' px '；rect。风格。top=(img。offset top y)' px '；};};/script/head dydiv class=' imgContainer ' img id=' img ' src=' http : assets/face。jpg '/div/body/html结果

代码描述。追踪。ObjectTracker()对要跟踪的对象进行分类，它可以接受一个数组作为参数指定的块的步长。setStepSize()。我们用“track”事件绑定要跟踪的对象，一旦对象被跟踪，被跟踪的对象就会触发跟踪事件。我们以对象数组的形式获取数据，其中包含每个对象(脸、嘴和眼睛)的结果摘要。你可能会发现，根据形状条件，结果会有所不同，还有一些地方需要改进和提高。我们也承认并真诚地同意这类API的开发。用图片运行示例：更多资源基于Javascript的面部识别https://github.com/au duno/head track https://github.com/au duno/clm tracker

我们计划做一个HTML5 Canvas和相机视频的人脸跟踪和图像标注的教程。您可以使用上面提到的客户端访问相机博客，它可以帮助您以您知道的方式访问用户的相机。注意：由于浏览器安全原因，此程序需要在同一个域或禁用网络安全的浏览器中运行。

请花一点时间与你的朋友分享这篇文章或留下评论。我们将真诚感谢您的支持！