正文

javascript人脸检测的实现方法(代码片段)

author  author  2022-12-10  805

关键词：

今天，我们开始学习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;  
       //在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力

  #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的文件，这些文件有助于我们从图片中检测人脸、眼睛和嘴巴。现在我们写一段代码来实现从静态图片中检测人脸，眼睛和嘴巴。我故意选用这张图片，因为这张图片中有多张不同表情和姿势脸。

本次给大家推荐一个免费的学习圈，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。**获取资料

android实现戴口罩人脸检测和戴口罩识别(附android源码)(代码片段)

Android实现戴口罩人脸检测和戴口罩识别(附Android源码)目录Android实现戴口罩人脸检测和戴口罩识别(附Android源码)1.戴口罩识别的方法（1）基于多类别目标检测的戴口罩识别方法（2）基于人脸检测+戴口罩分类识... 查看详情

人脸检测+人体检测c++android实现(代码片段)

人脸检测+人体检测C++Android实现本博客将实现C++版本的人脸检测，人脸关键点检测，人体检测，人脸+人体检测，推理框架采用TNN，在普通Android手机，CPU和GPU都可以达到实时检测的效果人... 查看详情

人脸检测+人体检测c++android实现(代码片段)

android实现戴口罩人脸检测和戴口罩识别(附android源码)(代码片段)

人脸检测5种方法(代码片段)

众所周知，人脸识别是计算机视觉应用的一个重大领域，在学习人脸识别之前，我们先来简单学习下人脸检测的几种用法。常见的人脸检测方法大致有5种，Haar、Hog、CNN、SSD、MTCNN：注：本文章图片来源于... 查看详情

opencv基于残差网络实现人脸检测(代码片段)

OpenCV基于残差网络实现人脸检测OpenCV3.3版本第一次把深度神经网络(DNN)模块引入到正式发布版本中，最新的OpenCV3.4中DNN模块发布了两个必杀技，一个支持FasterR-CNN的对象检测，比SSD与YOLO这些模型有更好的检测精度与小对象检测能... 查看详情

opencv-python实战（14）——人脸检测详解（仅需6行代码学会4种人脸检测方法）(代码片段)

OpenCV-Python实战（14）——人脸检测详解（仅需6行代码学会4种人脸检测方法）0.前言1.人脸处理简介2.安装人脸处理相关库2.1安装dlib2.2安装face_recognition2.3安装cvlib3.人脸检测3.1使用OpenCV进行人脸检测3.1.1基于Haar级联... 查看详情

opencv实现人脸，人眼，微笑检测(代码片段)

1.首先实现人脸检测1importcv223img=cv2.imread("people.jpg",1)#读入图像4#导入人脸级联分类器引擎，“.xml”文件里包含了训练出来的人脸特征5face_engine=cv2.CascadeClassifier(cv2.data.haarcascades+‘haarcascade_frontalface_default.xml‘)6 查看详情

dlib+opencv库实现疲劳检测(代码片段)

...1.关键点检测2.算法实现的核心点3.算法实现（1）人脸的关键点集合（2）加载人脸检测库和人脸关键点检测库（3）绘制人脸检测的框（4）对检测之后的人脸关键点坐标进行转换（5）计算欧... 查看详情

opencv-python也能实现人脸检测了(代码片段)

opencv中也可以实现深度学习中的人脸识别算法了。是怎么一回事呢？就是opencv中的DNN库，更新了好多深度学习的模块或者说是库函数，这样就让我们摆脱了安装庞大繁琐的深度学习框架。我们只需下载相应的权重文件... 查看详情

androidopencv实现人脸检测完成人脸检测功能(代码片段)

环境搭建：AndroidStudio集成OpenCV本节完整的代码链接：AndroidOpenCVDemo预览黑屏（下一节会实现预览的功能）1.创建assets文件夹2.在“OpenCV-android-sdk\\sdk\\etc\\lbpcascades”这个目录下找到lbpcascade_frontalface.xml这个文件，... 查看详情

opencv添加中文——(代码片段)

...添加中文使用。往期目录《OpenCV环境搭建（一）》《图片人脸检测——OpenCV版（二）》《视频人脸检测——OpenCV版（三）》《图片人脸检测——Dlib版（四）》效果预览实现思路使用PIL的图片绘制添加中文，可以指查看详情

超简单集成hmsmlkit人脸检测实现可爱贴纸(代码片段)

... 在这个美即真理、全民娱乐的时代，可爱有趣的人脸贴纸在各大美颜软件中得到了广泛的应用，现在已经不仅局限于相机美颜类软件中，在社交、娱乐类的app中对人脸贴纸、AR贴纸的需求也非常广泛。本文详细介绍了集... 查看详情

opencv+openvino实现人脸landmarks实时检测(代码片段)

...对DNN模块支持最好的表现之一就是开始支持基于深度学习人脸检测，OpenCV本身提供了两个模型分别是基于Caffe与Tensorflow的，Caffe版本的模型是半精度16位的，tensorflow版本的模型是8位量化的。同时OpenCV通过与OpenVINOIE模型集成实现... 查看详情

javacv实现图片中人脸检测完整代码教程(代码片段)

...教程前言今天微信群里聊天，群友问道有没有能让人脸露牙齿的接口，我记得想百度阿里的都应该有类似人脸识别，分析、融合的api,但是我百度了一下，确实没有找到，可能他们提供的都是最基础的接口ÿ... 查看详情

javacv实现图片中人脸检测完整代码教程(代码片段)

ssd+lbp实现人脸识别(代码片段)

...型（在本文后悔给出链接），然后结合LBP实现人脸检测，之所以选择ssd+lbp其原因在于快，相比于其他浮点计算人脸检测方法查看详情

opencvforjava实现人脸检测(代码片段)

...dll动态库就够了。下面给出一个简单的代码，实现人脸检测，所谓人脸检测，就是从一个图片或者视频里面找到人脸，一般我们测试，会直接把检测到的人脸轮廓标识出来，这样就表示我们检测成功了... 查看详情