使用js插件实现简单有趣的人脸识别

前阶段无聊想搞个人脸识别玩玩，发现一个有趣的插件包，虽然不算特别强大但是相对还是能实现效果，主要是它简单啊，让你5分钟内就会用，可以去玩玩看，现在我把它拿出来和大家分享

这个插件就是jquery.facedetection

首先

npm install jquery.facedetection

先引入jquery

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

下载依赖包，我们只需要把依赖包引进来，只需要三个js文件

<script src="node_modules/jquery.facedetection/src/ccv.js"></script>
<script src="node_modules/jquery.facedetection/src/jquery.facedetection.js"></script>
<script src="node_modules/jquery.facedetection/src/cascade.js"></script>

直接上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">html,body{margin: 0;padding:0;}.drawDiv{position: absolute;border: 3px solid yellow;}#image{float: left;}.imgDiv{float: left;}</style>
</head><body><img id="image" src=""/><div class="imgDiv"><div class="draw"></div><br/><input type="button" value="开始识别" onclick="identifyFace()"><input type="file"onchange="selectImage(this);" /></div><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><script src="node_modules/jquery.facedetection/src/ccv.js"></script>    <script src="node_modules/jquery.facedetection/src/jquery.facedetection.js"></script>    <script src="node_modules/jquery.facedetection/src/cascade.js"></script>    <script>//识别框样式var str='';//上传图片，使用文件流function selectImage(file){if(!file.files || !file.files[0]){return;}var reader = new FileReader();reader.onload = function(evt){console.log(evt);$('#image').attr('src', evt.target.result);}str = '';document.getElementsByClassName('draw')[0].innerHTML = '';reader.readAsDataURL(file.files[0]);}//开始识别function identifyFace() {str='';$('#image').faceDetection(function (faces) {for (var i in faces) {//识别结果循环传入方法drawFacedrawFace(faces[i].x, faces[i].y, faces[i].width, faces[i].height,faces[i].confidence);}});}//图片识别区的x,y轴以及宽高,confidence表示自信程度function drawFace(x,y,width,height,confidence){var confidenceStr='';if(confidence<0){confidenceStr='自信满满'}else if(confidence>2){confidenceStr='很不自信啊'}else{confidenceStr='一般般'}//将框框套上去str+='<div class="drawDiv" style="left:'+x+'px;top:'+y+'px;width:'+width+'px;height:'+height+'px;">'+confidenceStr+'</div>'document.getElementsByClassName('draw')[0].innerHTML=str}</script>
</body>
</html>

使用faceDetection将图片进行识别，识别结果通过回调函数形式传到face参数通过for in循环导出识别的结果,x,y分别为识别区的x,y方位，width和height就是宽高啦，confidence表示自信程度，自信程度这块可能不是很标准，不过大致还是能实现了

识别结果长这个样

项目预览

http://cgdmusic.cn:1234/face/index.html

插件的github

GitHub - jaysalvat/jquery.facedetection: A jQuery plugin to detect faces on images, videos and canvases.

使用js插件实现简单有趣的人脸识别相关推荐

swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.超好用话不多说,直接上教程 1.首先加载插件,需要用到 ...
python人脸识别系统下载_简单的Python人脸识别系统
案例一导入图片思路: 1.导入库 2.加载图片 3.创建窗口 4.显示图片 5.暂停窗口 6.关闭窗口 # 1.导入库 import cv2 # 2.加载图片 img = cv2.imread(' ...
unityar自动识别人脸_三款Unity插件带您玩转人脸识别与模拟
原标题:三款Unity插件带您玩转人脸识别与模拟若想让游戏或电影中的虚拟角色表现得更加真实,面部表情是至关重要的.人脸识别技术则借助真人表演来为虚拟角色赋予丰富的表情与面部动作,小至皱眉带动眼部肌肉 ...
人脸识别闸机python_简单的Python人脸识别系统
案例一导入图片思路: 1.导入库 2.加载图片 3.创建窗口 4.显示图片 5.暂停窗口 6.关闭窗口 # 1.导入库 import cv2 # 2.加载图片 img = cv2.imread(' ...
（python+cv2）做一个简单的摄像头人脸识别
编程语言用的是python,环境的话自己喜欢用哪个都ok,我用的是pycharm&anaconda 1.下面做编程准备 1)python环境简单的直接上官网下载python就ok了,如果想搞 ...
基于faceapi.js框架，在前端完成人脸识别
https://www.toutiao.com/a6717089581591691779/ 本文为大家介绍的是一款在浏览器端运行的人脸识别框架,即faceapi.js .它基于tensorflow.j ...
简单的Facenet_Pytorch人脸识别教程（windows+cpu）
本文使用的编译器是Pycharm,具体的安装教程可参考:Pycharm安装参考链接一.新建项目首先打开Pycharm,点击[new project]进行新建,选择项目的保存位置,将项目名称改为[t ...
tree.js 酷炫的效果，人脸识别签到思路，html5 3D微信头像自动抽奖代码
1.酷炫效果 1.1 网址: https://wow.techbrood.com/fiddle/43962 网址:https://wow.techbrood.com/fiddle/25678 1.2 ...
树莓派4B--openCV简单教程及人脸识别
2021SC@SDUSC 1. OpenCV 初识与安装本部分要了解 OpenCV (Open Source Computer Vision Library)的相关简介,OpenCv 可以运行在多平 ...

使用js插件实现简单有趣的人脸识别

使用js插件实现简单有趣的人脸识别相关推荐

最新文章

热门文章