你对人脸识别感兴趣吗?JavaScript实现的人脸检测方法

作者: 2015-02-10 10:08:59

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

今天,我们开始学习tracking.js,它是一个由Eduardo Lundgren开发的轻量级的javascript库,它可以让你做实时的人脸检测,色彩追踪和标记好友的脸。在这个教程中,我们将会看到,我们如何从静态图片中检测脸,眼睛和嘴巴。

在教程的最后,你可以看到一个教程提供可以用的例子,这个例子有技巧和提示以及更多的技术细节。

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

文件夹结构

  1. Project Folder  
  2. │  
  3. │   index.html  
  4. │  
  5. ├───assets  
  6. │       face.jpg  
  7. │  
  8. └───js  
  9.     │   tracking-min.js  
  10.     │   tracking.js  
  11.     │  
  12.     └───data  
  13.             eye-min.js  
  14.             eye.js  
  15.             face-min.js  
  16.             face.js  
  17.             mouth-min.js  
  18.             mouth.js 

你可以看到js文件夹里有我们从tracking.js中抽取的javascript文件。下面是index.html的html代码。

HTML代码

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.   <meta charset="utf-8"> 
  5.   <title>@tuts Face Detection Tutorial</title> 
  6.    
  7.   <script src="js/tracking-min.js"></script> 
  8.   <script src="js/data/face-min.js"></script> 
  9.   <script src="js/data/eye-min.js"></script> 
  10.   <script src="js/data/mouth-min.js"></script> 
  11.    
  12.   <style> 
  13.   .rect {  
  14.     border: 2px solid #a64ceb;  
  15.     left: -1000px;  
  16.     position: absolute;  
  17.     top: -1000px;  
  18.   }  
  19.    
  20.   #img {  
  21.     position: absolute;  
  22.     top: 50%;  
  23.     left: 50%;  
  24.     margin: -173px 0 0 -300px;  
  25.   }  
  26.   </style> 
  27. </head> 
  28. <body> 
  29. <div class="imgContainer"> 
  30.   <img id="img" src="assets/face.jpg" /> 
  31. </div> 
  32.    
  33. </body> 
  34. </html> 

在上面的HTML代码中,我们引入4个javascript来自于tracking.js的文件,这些文件有助于我们从图片中检测人脸、眼睛和嘴巴。现在我们写一段代码来实现从静态图片中检测人脸,眼睛和嘴巴。我故意选用这张图片,因为这张图片中有多张不同表情和姿势脸。

face

为了达成目标,我们需要修改html文件头部的代码。

HTML 代码

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.   <meta charset="utf-8"> 
  5.   <title>@tuts Face Detection Tutorial</title> 
  6.    
  7.   <script src="js/tracking-min.js"></script> 
  8.   <script src="js/data/face-min.js"></script> 
  9.   <script src="js/data/eye-min.js"></script> 
  10.   <script src="js/data/mouth-min.js"></script> 
  11.    
  12.   <style> 
  13.   .rect {  
  14.     border: 2px solid #a64ceb;  
  15.     left: -1000px;  
  16.     position: absolute;  
  17.     top: -1000px;  
  18.   }  
  19.    
  20.   #img {  
  21.     position: absolute;  
  22.     top: 50%;  
  23.     left: 50%;  
  24.     margin: -173px 0 0 -300px;  
  25.   }  
  26.   </style> 
  27. // tracking code.  
  28. <script> 
  29.     window.onload = function() {  
  30.       var img = document.getElementById('img');  
  31.    
  32.       var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']); // Based on parameter it will return an array.  
  33.       tracker.setStepSize(1.7);  
  34.    
  35.       tracking.track('#img', tracker);  
  36.    
  37.       tracker.on('track', function(event) {  
  38.         event.data.forEach(function(rect) {  
  39.           draw(rect.x, rect.y, rect.width, rect.height);  
  40.         });  
  41.       });  
  42.    
  43.       function draw(x, y, w, h) {  
  44.         var rect = document.createElement('div');  
  45.         document.querySelector('.imgContainer').appendChild(rect);  
  46.         rect.classList.add('rect');  
  47.         rect.style.width = w + 'px';  
  48.         rect.style.height = h + 'px';  
  49.         rect.style.left = (img.offsetLeft + x) + 'px';  
  50.         rect.style.top = (img.offsetTop + y) + 'px';  
  51.       };  
  52.     };  
  53.   </script> 
  54.    
  55. </head> 
  56. <body> 
  57. <div class="imgContainer"> 
  58.   <img id="img" src="assets/face.jpg" /> 
  59. </div> 
  60.    
  61. </body> 
  62. </html> 

结果

resutlface

代码说明.

  • tracking.ObjectTracker() 方法对你想要进行跟踪的对象进行了分类,它可以接受一个数组作为参数.

  • setStepSize() 指定的块的步进大小.

  • 我们将要跟踪的对象绑定上 &#8220;track&#8221; 事件, 对象一被跟踪,很快正在跟踪的对象就会触发跟踪事件.

  • 我们以对象数组的形式中获取数据,里面有每个对象(脸部,嘴部很眼部)的宽度,高度 , x 和 y 坐标;

结果总结.
你可能会发现结果会根据形状的条件而有所不同, 还有地方需要改进和提高,而我们也承认并且真心认同对于这种类型的API的开发.

运行示例:

带有的图片的运行示例.

更多资源 &#8211; 基于 Javascript 的面部识别

https://github.com/auduno/headtrackr

https://github.com/auduno/clmtrackr

我们计划为 HTML5 的 Canvas 和摄像头视频的脸部跟踪以及图像标签做一个教程。你可能会用到我上面提到的客户端访问摄像头博客,它可以帮助你,用你知道的方式去访问用户的摄像头。

注意:由于浏览器安全性的原因,这个程序需要运行在一样的域或者禁用网络安全的浏览器中。

喜欢这篇文章吗?

您要是有建议,补充,或者在这篇文章中发现错误,信息过时。我们期待你的评论。

请您花一点时间将文章分享给您的朋友或者留下评论。我们将会由衷感谢您的支持!

英文原文:Javascript based Face Detection Method

JavaScript
上一篇:如何使用深度学习AI检测并预防恶意软件及APT 下一篇:蚂蚁金服开源机器学习工具 SQLFlow,让人工智能应用像 SQL 一样简单
评论
取消
暂无评论,快去成为第一个评论的人吧

更多资讯推荐

2019年用于JavaScript的6大机器学习库

通常,人们使用两种编程语言之一来应用机器学习(ML)方法和算法:Python或R.关于机器学习的书籍,课程和教程通常也使用这些语言中的一种(或两者)。

爱码农 ·  2019-07-17 09:59:46
JavaScript教程:为Web应用程序添加人脸检测功能

不妨使用pico.js JavaScript库为我们的React地图浏览器应用程序添加人脸检测功能。上周我们使用annyang为地图界面增添了语音命令(https://www.infoworld.com/article/3400658/javascript-tutorial-add-speech-recognition-to-your-web-app.html)。

布加迪 ·  2019-07-02 08:00:00
2019年11个值得研究的Javascript机器学习库

虽然大部分机器学习都是用python这样的语言完成的,但在Javascript生态系统中,其前端和后端社区都很棒。这里分享有一些有趣的库,它们将Javascript,机器学习,DNN甚至NLP结合在一起。

EdgeAITech ·  2019-03-18 08:12:31
JavaScript也能玩机器学习 推荐5个开源 JavaScript 机器学习框架

作为一名Web的前端开发者,我很好奇机器学习是如何工作的。我并没计划要系统学习关于机器学习(ML)、神经网络、NLP自然语言处理之类的知识,不过光看到这些概念就觉得很有意思,简直是打开了一个新的世界。

极链科技Video++技术中心前端Team ·  2018-10-11 10:37:31
五个最热门的开源机器学习JavaScript框架

如果你是一位想要深入机器学习的 JavaScript 程序员或想成为一位使用 JavaScript 的机器学习专家,那么这些开源框架也许会吸引你。

Dr.michael J.garbade ·  2018-07-10 08:40:36
【探究】八种支持机器学习模型训练的JavaScript框架

在本文章中,您将了解到不同的机器学习JavaScript框架,包括:DeepLearn.js、PropelJS、ML-JS、ConvNetJS、KerasJS、STDLib、Limdu.js和Brain.js。

陈峻 ·  2018-03-09 09:00:00
10个机器学习的JavaScript示例

虽然许多JavaScript语言编写的机器学习库是刚刚诞生并且还在持续开发中,但还是值得去尝试使用它们。这篇文章会介绍几个JavaScript语言编写的机器学习库以及一些很酷的AI Web应用示例,它们可以很好的帮助你开始AI之旅。

雪飞鸿 ·  2017-12-05 11:25:09
30行JavaScript代码,教你分分钟创建神经网络

今天我们要讲的例子是一个非常简单的神经网络,我们将用它来学习逻辑异或方程(XOR equation)。同时,我也在Scrimba上创建了一个交互式屏幕录像。

代码小能手 ·  2017-09-15 13:35:11
Copyright©2005-2019 51CTO.COM 版权所有 未经许可 请勿转载