JavaScript人脸检测的实现方法-js tutoriel-php.cn

Maison

interface Web

js tutoriel

JavaScript人脸检测的实现方法

伊谢尔伦

Nov 24, 2016 am 09:40 AM

javascript

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

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

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

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

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

文件夹结构

Project Folder

│

│ index.html

│

├───assets

│ face.jpg

│

└───js

│ tracking-min.js

│ tracking.js

│

└───data

eye-min.js

eye.js

face-min.js

face.js

mouth-min.js

mouth.js

你可以看到js文件夹里有我们从tracking.js中抽取的javascript文件。下面是index.html的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>
</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(&#39;img&#39;); 
 
      var tracker = new tracking.ObjectTracker([&#39;face&#39;, &#39;eye&#39;, &#39;mouth&#39;]); // Based on parameter it will return an array. 
      tracker.setStepSize(1.7); 
 
      tracking.track(&#39;#img&#39;, tracker); 
 
      tracker.on(&#39;track&#39;, 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(&#39;div&#39;); 
        document.querySelector(&#39;.imgContainer&#39;).appendChild(rect); 
        rect.classList.add(&#39;rect&#39;); 
        rect.style.width = w + &#39;px&#39;; 
        rect.style.height = h + &#39;px&#39;; 
        rect.style.left = (img.offsetLeft + x) + &#39;px&#39;; 
        rect.style.top = (img.offsetTop + y) + &#39;px&#39;; 
      }; 
    }; 
  </script>
 
</head>
<body>
<div class="imgContainer">
  <img id="img" src="assets/face.jpg" />
</div>
 
</body>
</html>

结果

代码说明.

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

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

我们将要跟踪的对象绑定上 “track” 事件, 对象一被跟踪，很快正在跟踪的对象就会触发跟踪事件.

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

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

运行示例:

带有的图片的运行示例.

更多资源 – 基于 Javascript 的面部识别

https://github.com/auduno/headtrackr

https://github.com/auduno/clmtrackr

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

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

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article connexe

Frameworks javascript: alimenter le développement Web moderneMay 02, 2025 am 12:04 AM

La puissance du cadre JavaScript réside dans la simplification du développement, l'amélioration de l'expérience utilisateur et les performances des applications. Lorsque vous choisissez un cadre, considérez: 1. Taille et complexité du projet, 2. Expérience d'équipe, 3. Écosystème et soutien communautaire.

La relation entre JavaScript, C et BrowsersMay 01, 2025 am 12:06 AM

INTRODUCTION Je sais que vous pouvez le trouver étrange, que doit faire exactement JavaScript, C et Browser? Ils semblent sans rapport, mais en fait, ils jouent un rôle très important dans le développement Web moderne. Aujourd'hui, nous discuterons du lien étroit entre ces trois. Grâce à cet article, vous apprendrez comment JavaScript fonctionne dans le navigateur, le rôle de C dans le moteur du navigateur et comment ils fonctionnent ensemble pour stimuler le rendu et l'interaction des pages Web. Nous connaissons tous la relation entre JavaScript et Browser. JavaScript est la langue principale du développement frontal. Il fonctionne directement dans le navigateur, rendant les pages Web vives et intéressantes. Vous êtes-vous déjà demandé pourquoi javascr

Node.js diffuse avec dactylographieApr 30, 2025 am 08:22 AM

Node.js excelle dans des E / S efficaces, en grande partie grâce aux flux. Streams traite les données progressivement, en évitant la surcharge de mémoire - idéal pour les fichiers volumineux, les tâches réseau et les applications en temps réel. Combiner les flux avec la sécurité de type dactylographié crée un powe

Python vs JavaScript: considérations de performance et d'efficacitéApr 30, 2025 am 12:08 AM

Les différences de performance et d'efficacité entre Python et JavaScript se reflètent principalement dans: 1) comme un langage interprété, Python fonctionne lentement mais a une efficacité de développement élevée et convient au développement rapide des prototypes; 2) JavaScript est limité au thread unique dans le navigateur, mais les E / S multi-threading et asynchrones peuvent être utilisées pour améliorer les performances dans Node.js, et les deux ont des avantages dans les projets réels.

Les origines de JavaScript: explorer son langage d'implémentationApr 29, 2025 am 12:51 AM

JavaScript est originaire de 1995 et a été créé par Brandon Ike, et a réalisé que la langue en langue C. 1.C offre des capacités de programmation élevées et au niveau du système pour JavaScript. 2. La gestion de la mémoire de JavaScript et l'optimisation des performances reposent sur le langage C. 3. La fonctionnalité multiplateforme du langage C aide JavaScript à s'exécuter efficacement sur différents systèmes d'exploitation.

Dans les coulisses: quel langage alimente JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript s'exécute dans les navigateurs et les environnements Node.js et s'appuie sur le moteur JavaScript pour analyser et exécuter du code. 1) Générer une arborescence de syntaxe abstraite (AST) au stade d'analyse; 2) Convertir AST en bytecode ou code machine à l'étape de compilation; 3) Exécutez le code compilé à l'étape d'exécution.

L'avenir de Python et Javascript: tendances et prédictionsApr 27, 2025 am 12:21 AM

Les tendances futures de Python et JavaScript incluent: 1. Python consolidera sa position dans les domaines de l'informatique scientifique et de l'IA, 2. JavaScript favorisera le développement de la technologie Web, 3. Le développement de plate-forme multiplié deviendra un sujet brûlant, et 4. L'optimisation des performances sera le focus. Les deux continueront d'étendre les scénarios d'application dans leurs champs respectifs et de faire plus de percées dans les performances.

Python vs JavaScript: environnements et outils de développementApr 26, 2025 am 12:09 AM

Les choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.

See all articles