Effet.js：vue前端实现轻量级人脸登录框架的强大功能与使用指南实现人脸登录人脸打卡睡眠监测功能

在这里插入图片描述

Effet.js 是一个轻量级的人脸样式框架，专注于为网页带来生动的面部动画和动态效果。通过简单易用的 API，开发者不仅可以实现眨眼、张嘴、摇头等基础表情，还可以应用于多种场景，如人脸打卡、人脸登录、睡眠监测等。同时，Effet.js 对外提供 API，用户可根据需求灵活定制，实现更多的动作或功能，使得前端应用更加互动、智能且个性化。
在这里插入图片描述

一、Effet.js 的特性与优势

轻量级：不会对页面性能造成过多负担，确保网页加载速度和运行流畅性。
简单易用的 API：开发者可以轻松实现眨眼、张嘴、摇头等基础表情，降低了开发难度。
可定制的动画效果：能够根据不同的应用场景进行个性化定制，增强了场景适用性。

二、Effet.js 的功能介绍

人脸登录：通过识别面部表情来完成打卡任务，摆脱传统打卡方式的繁琐，提高用户体验和安全性。
人脸打卡：提供基于人脸的认证功能，为企业和组织提供更加便捷和安全的考勤方式。
睡眠检测：通过面部动态追踪来监控用户的睡眠状态，可应用于健康管理等领域。

三、安装

通过npm的方式安装

 npm i face-effet -S

第三方CDN方式引入

💡 以下列出的都是由知名第三方免费开放的公共 CDN 资源，各版本更新会通过 NPM 或 GitHub 自动进行同步，确保资源的实时更新和可用性，方便开发者快速获取和使用最新的版本。

<!-- 引入样式 --><linkrel="stylesheet"href="https://unpkg.com/face-effet/effet/effet.css"><!-- 引入框架 --><scriptsrc="https://unpkg.com/face-effet/effet/effet.js"></script>

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Face-effet.js 人脸登录示例</title><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="https://unpkg.com/face-effet/effet/effet.css"><scriptsrc="https://unpkg.com/face-effet/effet/effet.js"></script><style>#myface{margin-top: 350px;}</style><script>
         document.addEventListener("DOMContentLoaded",function(){
             effet.init({
                 el:'myface',callBack:(data)=>{
                     console.log(data);}});});</script></head><body><!-- 用于渲染人脸识别的容器 --><divid="myface"></div><buttononclick="effet.restart()">重新检测</button></body></html>

快速上手

Vue中的使用方式一
npm安装完成后，在main.js中引入

import Vue from'vue'import App from'./App.vue'import router from'./router'// 引入框架import'face-effet/effet/effet.css'import faceEffet from'face-effet/effet/effet.js'// 注册为全局Vue.prototype.$faceEffet = faceEffet
 
 Vue.config.productionTip =falsenewVue({
   router,render:h=>h(App)}).$mount('#app')

<template><div><divid="dangqface"></div><button@click="restart">重新验证</button></div></template><script>exportdefault{data(){return{
       editor:null};},mounted(){this.$faceEffet.init({
         el:'dangqface',callBack:(data)=>{
           console.log(data);}})},
   methods:{restart(){this.$faceEffet.restart()}}};</script><style>#dangqface{width: 100%;height: 600px;position: absolute;transform:translate(-50%,-50%);left: 50%;top: 50%;overflow: hidden;border: 1px red solid;}</style>

Vue中的使用方式二
如果使用npm到网络出现的问题，建议切换为淘宝镜像安装，或者可以直接在浏览器输入
https://unpkg.com/face-effet/effet/effet.css
https://unpkg.com/face-effet/effet/effet.js
将两个effet.css 跟 effet.js直接放在本地项目assets或者其他资源文件中即可

<template><div><divid="faceVue"></div><el-button@click="startFace">开启人脸</el-button><el-button@click="restartFace">重启人脸</el-button><el-button@click="closeFace">关闭人脸</el-button></div></template><script>// 静态资源的调用方式，将打包好的资源放在你的assets或者其他文件夹import effet from"@/views/V1.0.0/views/index";exportdefault{
   name:"index",data(){return{
       faceEffet:effet,}},beforeDestroy(){if(this.faceEffet){this.faceEffet.close();}},
   methods:{startFace(){this.faceEffet.init({
         el:'faceVue',
         callBack:this.callBack
       })},callBack(data){
       console.log(data)},restartFace(){this.faceEffet.restart()},closeFace(){this.faceEffet.close();}}}</script><style>/*静态资源的调用方式，将打包好的资源放在你的assets或者其他文件夹*/@import"../effet.css";</style>

标签：前端 javascript 开发语言

本文转载自: https://blog.csdn.net/weixin_41961749/article/details/143574614
版权归原作者 代码说 所有，如有侵权，请联系我们删除。