简介

Face-api.js 是一个 JavaScript API,基于 tensorflow.js 核心 API 的人脸检测和人脸识别的浏览器实现。

由于现在前端代码中JS的重要性以及成熟度,我们可以很方便地调用在小型的web项目中,甚至是只有前端的小项目,html+css+js实现人脸检测,而且效率也非常高。
GitHub:https://github.com/justadudewhohacks/face-api.js/

实例

由于本人在做项目时只是需要人脸检测的功能,所以只是调用了该API,关于人脸识别和深度学习的相关知识我也没有深入探究了。

首先,在GitHub上下载完api后的目录中weights中的内容复制到项目目录models中(作为检测用的模型),将face-api.js导入项目后直接调用相关方法。

weights目录内容:

核心代码:

async function faceDetection() {// 加载模型// 人脸检测模型,上面提到的需要复制内容到modelsawait faceapi.nets.ssdMobilenetv1.loadFromUri("models");// 人脸地标模型await faceapi.nets.faceLandmark68Net.loadFromUri("models");// 获取图片实例const image = document.getElementById("face");// 开始人脸识别,先识别脸,只返回一个最接近的人脸数据// 再识别眼、嘴、鼻的位置,使用68个点坐标模型// 最后获取脸部描述const detection = await faceapi.detectAllFaces(image).withFaceLandmarks();// .withFaceDescriptors();//面部识别框const box = document.getElementById("overlay");const displaySize = { width: input.width, height: input.height };faceapi.matchDimensions(box, displaySize);const resizedDetection = faceapi.resizeResults(detection, displaySize);faceapi.draw.drawDetections(box, resizedDetection);faceapi.draw.drawFaceLandmarks(box, resizedDetection);
}faceDetection();

检测成功,是不是很简单呢。

基于上述人类检测,我们还可以通过调用其他方法来实现人类识别和表情检测,以及我的项目中实现的刷脸登录,之后我会慢慢分享,今天就到这里吧。

对前端程序员非常友好的人脸检测接口——face-api.js的介绍和demo相关推荐

  1. 看看20万程序员怎么评论:前端程序员会不会被淘汰?

    今天看到新闻,有团队做了款软件手机版这段时间发布了,可以直接生成网页,在想web前端值得学下去还是该改学后端,做这个决定.个人感觉最吸引的地方就是门槛低还可以按照自己要求傻瓜式生成,已经看到体验感不错 ...

  2. 初中级前端程序员面试中小型公司会问哪些问题?

    初中级前端程序员面试中小型公司会问哪些问题?不同的公司面试内容也不尽相同,有的面试过程很轻松,有的面试官是个架构师level 挺高不会问八股文,给出了几个现实中的场景,然后转换成代码的逻辑去让实现. ...

  3. 前端程序员一般在哪些网站接单?

    之前也写过一期前端程序员兼职接单的方法,但有粉丝私信说文章中前端接单的网站是比较少的,对想要找更多的网站对比下,今天就给大家做一个补充,希望能够帮到有需要的同学哦~ 如果嫌弃前面的文字太长,可以直接翻 ...

  4. 一个合格的web前端程序员要学会哪些技能?

    想要成为一名合格的web前端程序猿,要学习的东西有很多,那么web前端要学会哪些技能呢?来看看下面的详细介绍就知道了. 一个合格的web前端程序员要学会哪些技能?想从事web前端开发,只会HTML.C ...

  5. 快速开发插件emmet,前端程序员炫技必备!

    同学们肯定看到过有前端程序员在开发的时候输入一小行代码然后立马就出现一大串写好的代码,感觉很高大上的感觉.今天小千就来教大家如何实现这个效果. 平时我们在做开发的时候最费时间的工作就是写 HTML.C ...

  6. 前端程序员最爱用的8款代码编辑器,你用哪款?

    今天给大家分享8款前端程序员最爱用的代码编辑器,来看看你用哪款? 学编程从模仿开始,照书上一个字符一个字符的把代码敲进编辑器,编译,运行,输出"Hello word!".Fine, ...

  7. 前端程序员书桌上不可缺少的CSS书籍

    作为前端,CSS不仅要会,而且要精通,随着各种浏览器规范参差不齐和网页交互多元化的趋势越来越复杂,前端程序员必须要将CSS基础知识打牢.由于现在的框架越来越多,导致很大一部分程序员的工作只是拿着现成的 ...

  8. 2022将至,前端程序员们应该一起放个烟花庆祝一下,走起

    前言:小时候,在我印象中,每到快过年的时候就有很多卖炮仗的,一般也就是阳历的12月份到明年的正月15号卖炮仗的商家比较多,省下买辣条的钱去买炮仗,在老家也就过年和除夕两天及正月15日这几天放烟花和炮仗 ...

  9. Java程序员情人节_盘点程序员情人节的表白,前端程序员最浪漫,后端不服来战...

    今天是 2 月 14 日情人节,我看公众号后台有好多人在回复关键字:情人节表白代码.我想,我作为大家的校长,必须给大家送一波福利代码啊!我是真没想到,竟然很多程序员都想用代码表白,还整的挺浪漫的,看来 ...

最新文章

  1. 【分布式共识三】拜占庭将军问题----书面协议
  2. 30行代码如何写一封七夕密书?
  3. mvc crud_Spring MVC3 Hibernate CRUD示例应用程序
  4. Maven常见问题和陷阱
  5. JavaScript覆盖率统计实现
  6. PS图片后期之超简易造光调色方法
  7. mysql的学生信息建表语句_SQL语句创建学生信息数据库表的示例
  8. HBuilder 开发工具
  9. 网上赚钱竞争那么激烈你一定要有自己的绝活!
  10. SLAM中双目三角化
  11. 【JavaEE】进入Web开发的世界-HTML
  12. Python+unittest+requests 接口自动化测试框架搭建 完整的框架搭建过程 实战
  13. 抓包工具以及如何看抓包信息
  14. Python 爬虫实战(三) 获取百度地图搜索结果
  15. java B2B2C源码电子商务平台
  16. vue中ref的使用
  17. 精选国外知名网站手机版网页设计欣赏
  18. 后端优化1(SLAM十四讲ch10)-BA
  19. [applicationContext.xml] cannot be opened because it does not exist 解决方案
  20. Xshell使用密钥登录Linux服务器

热门文章

  1. Myriad 应用相关
  2. SXOI2017游记
  3. 阅读和笔记同时整理——pdf笔记软件推荐BookxNote
  4. 计算机考研计算机组成原理题库
  5. AngularJS学习之$q和promise介绍
  6. C/C++语言能做什么?C/C++程序员在做什么?企业需要什么样的C/C++程序员
  7. 免费计算机群,获得大量的微信群的三种方法
  8. 超越时间和空间,带你到n维去!
  9. CentOS8:Docker搭建Jenkins2.60.3版本,及更换jenkins下载源
  10. 2022年最新浙江建筑特种工(施工升降机)真题题库及答案