之前不是做了个开源项目吗，完成GitHub登录后，还以为会更牛逼一点，说要加人脸识别登录，就我一个这套佛系的开发进度，终于在一周后安排好了。源码在文末。其实最近对写文章有点抗拒。没有人看我写的东西。我已经调整好了心态，只要我分享的东西对大家有帮助，至于有多少人看，随他去吧！话不多说，先来看看人脸识别效果的动态。马赛克有点重，没办法好看。实现原理我们来看看人脸识别登录的大致流程。主要分为三个步骤：在前端登录页面打开摄像头，进行人脸识别。注意：只识别屏幕中是否有人脸。识别人脸后，拍照上传当前画面图片后台接受图片，调用人脸库SDK进行人像比对。如果通过则登录成功，将人像信息注册到人脸库和本地mysql中。上面提到的前端实现，要在前端进行人脸识别，所以这里就要借助工具了。我使用tracking.js，一个轻量级的前端人脸识别框架。前端Vue代码的实现逻辑比较简单。tracking.js在开启摄像头识别人脸信息后，对视频图像进行拍照，将图像信息上传至后台，等待图像比对结果。data(){return{showContainer:true,//显示tracker:null,tipFlag:false,//提示用户检测flag:false,//判断是否拍过照片context:null,//画布上下文removePhotoID:null,//停止转换图片scanTip:'人脸识别...',//提示文字imgUrl:'',//base64格式图片canvas:null}},mounted(){this.playVideo()},methods:{playVideo(){varvideo=document.getElementById('video');this.canvas=document.getElementById('canvas');thisthis.context=this.canvas.getContext('2d');this.tracker=newtracking.ObjectTracker('face');this.tracker.setInitialScale(4);this.tracker.setStepSize(2);this.tracker.setEdgesDensity(0.1);tracking.track('#video',this.tracker,{camera:真});this.tracker.on('track',this.handleTracked);},handleTracked(事件){this.context.clearRect(0,0,this.canvas.width,this.canvas.height);if(event.data.length===0){this.scanTip='没有识别到??人脸'}else{if(!this.tipFlag){this.scanTip='识别成功，拍照，请勿动~'}//1秒后拍照，只拍一次if(!this.flag){this.scanTip='拍照中...'this.flag=truethis.removePhotoID=setTimeout(()=>{this.tackPhoto()this.tipFlag=true},2000)}event.data.forEach(this.plot);}},plot(rect){this.context.strokeStyle='#eb652e';this.context.strokeRect(rect.x,rect.y,rect.width,rect.height);this.context.font='11pxHelvetica';this.context.fillStyle="#fff";this.context.fillText('x:'+rect.x+'px',rect.x+rect.width+5,rect.y+11);this.context.fillText('y:'+rect.y+'px',rect.x+rect.width+5,rect.y+22);},//拍摄照片(){this.context.drawImage(this.$refs.refVideo,0,0,500,500)//保存为base64格式thisthis.imgUrl=this.saveAsPNG(this.$refs.refCanvas)varformData=newFormData();formData.append("file",this.imgUrl);this.scanTip='登录中，请登录等~'axios({method:'post',url:'/faceDiscern',data:formData,}).then(function(response){alert(response.data.data);window.location.href="http://127.0.0.1:8081/home";}).catch(函数(错误){console.log(错误);});this.close()},//保存为png,base64格式图片saveAsPNG(c){returnc.toDataURL('image/png',0.3)},//关闭并清理资源close(){this.flag=falsethis.tipFlag=falsethis.showContainer=falsethis.tracker&&this.tracker.removeListener('track',this.handleTracked)&&tracking.track('#video',this.tracker,{camera:false});this.tracker=nullthis.context=nullthis.scanTip=''clearTimeout(this.removePhotoID)}}人脸识别之前也做过人脸识别案例《基于 Java 实现的人脸识别功能（附源码）》，但是调用SDK的方法太繁琐，代码量巨大，所以这次为了简化实现，我从百度人脸识别API切换到人，出乎意料的简单。别问我为什么不自己写人脸识别工具，别问，别在百度云上注册应用就可以了https://console.bce.baidu.com/ai/?_=1595996996657&fromai=1#/ai/face/app/list获取APIKey和SecretKey，用于后续获取token。百度云人脸识别的API很友好，各种操作的demo都写好了，带过来简单修改即可。第一步是获取token，这是调用百度人脸识别API的基础。https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=【百度云应用的AK】&client_secret=【百度云应用的SK】接下来我们开始对比图片，百度云提供了一张在线人脸数据库。当用户登录时，我们首先检查人脸数据库中是否存在肖像。如果存在，则表示登录成功。如果不存在，则将其注册到人脸数据库中。每张图片都有一个唯一的标识符face_token。百度人脸识别API实现起来比较简单，需要特别注意参数image_type，它有三种BASE64：图片的base64值，base64编码后的图片数据，编码后的大小图片不超过2M；URL：图片的URL地址（可能由于网络等原因，图片下载时间过长）；FACE_TOKEN：人脸图片的唯一标识。在调用人脸检测接口时，会为每张人脸图片分配一个唯一的FACE_TOKEN。同一张图片多次检测得到的FACE_TOKEN是同一个。而我们这里使用的是图片BASE64文件，所以image_type应该设置为BASE64。@OverridepublicBaiDuFaceSearchResultfaceSearch(Stringfile){try{byte[]decode=Base64.decode(Base64Util.base64Process(file));StringfaceFile=Base64Util.encode(decode);Map
