jq使用face-api.js 识别人脸对比是否是同一个人

对于一个需求：两张图片对比识别出是否是同一个人，在百度搜索没找到jq版本的代码。无奈自己研究一下。使用face-api.js能够实现代码。应付需求足以。对于对于人脸识别没有太多的研究。
首先需要去官网获取face-api.js的人脸识别插件：
https://github.com/justadudewhohacks/face-api.js/#getting-started-face-detection-options

下面就是代码部分

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="./css/bootstrap.css"><link rel="stylesheet" href="./css/compare.css"><script src="./lib/jquery-3.4.1.js"></script><title>人脸对比</title>
</head>
<body><div class="result"><h3>相似度</h3><div id="resultRate"></div><h4>经过<b>算法</b>判断结果:</h4><div id="result"></div></div><div class="box"><div class="left"><div class="imgWrapper"><img id="picture1" src="img/51.png"></div><form id="imgUpload" enctype="multipart/form-data"><input type="file" name="img" id="img01"  onchange="showImg()"></form></div><div class="right"><div class="imgWrapper"><img id="picture2" src="img/5.png" ></div><form id="imgCompare" enctype="multipart/form-data"><input type="file" name="img" id="img02" onchange="showAnotherImg()" multiple></form></div><div class="compareBtnWraaper"> <input type="button" id="compareBtn" value="比较一下" type="button" class="btn btn-primary btn-lg btn-block"></div></div><script src="./lib/face-api.min.js"></script><script src="./js/compare.js"></script>
</body>
</html>

compare.js代码

var modelPath = './models';
const faceDetectionNet = faceapi.nets.ssdMobilenetv1;
const minConfidence = 0.8;
const faceDetectionOptions = new faceapi.SsdMobilenetv1Options({ minConfidence });faceapi.nets.ssdMobilenetv1.loadFromUri(modelPath),faceapi.nets.faceLandmark68Net.loadFromUri(modelPath),faceapi.nets.faceRecognitionNet.loadFromUri(modelPath)function showImg() {var r = new FileReader();f = document.getElementById('img01').files[0];console.log(f)r.readAsDataURL(f);r.onload = function(e) {document.getElementById('picture1').src = this.result;};
}function showAnotherImg() {var r = new FileReader();f = document.getElementById('img02').files[0];r.readAsDataURL(f);r.onload = function  (e) {document.getElementById('picture2').src = this.result;};
}
$(function(){$('#compareBtn').click( async ()=> {const picElem1 = document.getElementById('picture1');const picElem2 = document.getElementById('picture2');const picture1 = await faceapi.detectAllFaces(picElem1).withFaceLandmarks().withFaceDescriptors();const picture2 = await faceapi.detectAllFaces(picElem2).withFaceLandmarks().withFaceDescriptors();const dist = faceapi.euclideanDistance( picture1[0].descriptor,picture2[0].descriptor,);console.log(dist);$('#resultRate').html(dist)// 相似度大于0.4表示不是同一个人if(dist > 0.4){$('#result').html("不是同一个人");console.log('不是同一个人')}else {$('#result').html("是同一个人");console.log('是同一个人')}})
})

compare.css

//compare.csshtml{width:100%;
}
body{width:100%;
}
.box{width:100%;position: relative;top:80px;border:1px solid #fff;
}
.imgWrapper{width: 150px;position: absolute;top:10px;text-align: center;padding-top:10px;
}
input[type="file"] {width:100%;
}
img{width:100%;
}
.left{width:50%;float: left;padding:20px;
}
.right{width:50%;float: left;border-left:1px solid #ccc;padding:20px;
}#imgUpload{margin-top: 250px;
}
#imgCompare{margin-top: 250px;
}
.compareBtnWraaper{text-align: center;
}
.result{text-align: center;
}
#resultRate{height:100px;font-size: 40px;font-weight: 800;
}
#result{font-size: 36px;color:red;height:75px;
}

demo图

jq使用face-api.js 识别人脸对比是否是同一个人相关推荐

4、人脸识别-人脸对比
人脸对比接口能力两张人脸图片相似度对比:比对两张图片中人脸的相似度,并返回相似度分值: 多种图片类型:支持生活照.证件照.身份证芯片照.带网纹照四种类型的人脸对比: 活体检测控制:基于图片中的破绽 ...
百度AI图像处理(V3版本)—人脸识别（人脸对比）调用教程（基于Python3-附Demo）
首先来看一下识别的效果:这里需要完整代码以及SDK的请点击此处下载:百度人脸识别-人脸对比首先需要注册百度账号并且创建对应的应用,这里具体方法如图: 访问:http://ai.baidu.com/ ...
Java调用百度人脸对比接口进行人脸(图片)对比
前三步和人脸检测代码一样在我上一篇博客地址链接:https://blog.csdn.net/weixin_45736927/article/details/104696428 第四步 Token和工 ...
调用百度人脸识别API进行人脸对比 C语言
百度人脸识别api使用是免费的,有人脸对比.人脸搜索.人脸检测与属性分析三个功能,本文写的是人脸对比.这里给出百度人脸对比api的技术文档,请点击网址https://cloud.baidu.com/d ...
java+js实现人脸识别-基于百度api
java+js实现人脸识别-基于百度api 我的第一次分享第一步-我们了解下实现的思路代码部分:1.js代码 2.后台代码 3.如何使用百度大脑 4.如何使用 navigator.mediaDev ...
python人脸识别对比_python 人脸对比--百度API人脸相似度识别(超简单)
说明:这篇是写使用百度人脸识别API进行人脸相似度识别对比,如给两个人物照片,判断是否是同一个人.简单的4步完成. 1,获取百度人脸识别API的API Key和Secret Key.(10分钟内完成 ...
python中文相似度_python 人脸对比--百度API人脸相似度识别(超简单)-Go语言中文社区...
说明:这篇是写使用百度人脸识别API进行人脸相似度识别对比,如给两个人物照片,判断是否是同一个人.简单的4步完成. 1,获取百度人脸识别API的API Key和Secret Key.(10分钟内完成 ...
人脸识别（二）调用face++api实现人脸对比
上次博客简单讲了一下调用face++的api来检测人脸.当然,生产环境中要实现复杂的需求光靠这么简单的调用一下api肯定是不行的.这次先来讲一讲face++中实现人脸对比的api并实现一些相对较为复杂 ...
利用百度人脸识别API，实现人脸登陆JavaWeb
JavaWeb利用百度API实现人脸登陆功能笔者的完整项目 1,在百度云注册人脸库 2,引入必要的包 3,编写java代码 4,介绍对人脸库的增删改查功能 5,该功能加入到我的项目 (1),界面展示 ...

jq使用face-api.js 识别人脸对比是否是同一个人

jq使用face-api.js 识别人脸对比是否是同一个人

下面就是代码部分

jq使用face-api.js 识别人脸对比是否是同一个人相关推荐

最新文章

热门文章