├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── shims-vue.d.ts
    ├── utils
    │   └── axios.ts
    ├── main.ts
    ├── router
    │   └── index.ts
    ├── components
    │   └── DialogAddFace.vue
    ├── views
    │   ├── FaceStream.vue
    │   ├── FaceRecognition.vue
    │   ├── FaceDetect.vue
    │   └── FaceCompare.vue
    └── App.vue
├── babel.config.js
├── .gitignore
├── vue.config.js
├── jsconfig.json
├── README.md
├── tsconfig.json
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itboyst/ArcSoftFaceDemoUI/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itboyst/ArcSoftFaceDemoUI/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | declare module '*.vue' {
3 |   import type { DefineComponent } from 'vue'
4 |   const component: DefineComponent<{}, {}, any>
5 |   export default component
6 | }
7 | 


--------------------------------------------------------------------------------
/src/utils/axios.ts:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | 
 4 | 
 5 | axios.interceptors.response.use(res => {
 6 |     // if (typeof res.data !== 'object' && typeof res.data !== '') {
 7 |     //     console.error("请求异常")
 8 |     //     return Promise.reject(res)
 9 |     // }
10 |     return res.data
11 | })
12 | 
13 | export default axios


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('@vue/cli-service')
 2 | module.exports = defineConfig({
 3 |   transpileDependencies: true,
 4 |   lintOnSave:false,
 5 |   devServer: {
 6 |     port: 8088,
 7 |     proxy: {
 8 |       "/": {
 9 |         target: "http://127.0.0.1:8089",
10 |         changeOrigin: true,
11 |         ws: false,
12 |       }
13 |     }}
14 | })
15 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # arcface-ui
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | 
 5 | import router from './router'
 6 | // import store from './store'
 7 | 
 8 | import ElementPlus from 'element-plus'
 9 | 
10 | import 'element-plus/dist/index.css'
11 | 
12 | 
13 | const app =createApp(App)
14 | 
15 | //确保 _use_ 路由实例使
16 | //整个应用支持路由。
17 | app.use(router)
18 | // app.use(store)
19 | app.use(ElementPlus);
20 | 
21 | app.mount('#app')
22 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";
 2 | 
 3 | 
 4 | const routes: Array<RouteRecordRaw> = [
 5 |     {
 6 |         path: '/',
 7 |         component: () => import("@/views/FaceDetect.vue")
 8 |     },
 9 |     {
10 |         path: '/faceDetect',
11 |         component: () =>import("@/views/FaceDetect.vue")
12 |     },
13 |     {
14 |         path: '/faceCompare',
15 |         component: () => import("@/views/FaceCompare.vue")
16 |     },
17 |     {
18 |         path: '/faceRecognition',
19 |         component: () => import("@/views/FaceRecognition.vue")
20 |     },
21 |     {
22 |         path: '/faceStream',
23 |         component: () =>import("@/views/FaceStream.vue")
24 |     }
25 | ]
26 | 
27 | 
28 | const router = createRouter({
29 |     history: createWebHashHistory(),
30 |     routes: routes
31 | })
32 | 
33 | export default router;
34 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "moduleResolution": "node",
 8 |     "experimentalDecorators": true,
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "forceConsistentCasingInFileNames": true,
14 |     "useDefineForClassFields": true,
15 |     "sourceMap": true,
16 |     "baseUrl": ".",
17 |     "types": [
18 |       "webpack-env"
19 |     ],
20 |     "paths": {
21 |       "@/*": [
22 |         "src/*"
23 |       ]
24 |     },
25 |     "lib": [
26 |       "esnext",
27 |       "dom",
28 |       "dom.iterable",
29 |       "scripthost"
30 |     ]
31 |   },
32 |   "include": [
33 |     "src/**/*.ts",
34 |     "src/**/*.tsx",
35 |     "src/**/*.vue",
36 |     "tests/**/*.ts",
37 |     "tests/**/*.tsx"
38 |   ],
39 |   "exclude": [
40 |     "node_modules"
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "arcface-ui",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@element-plus/icons-vue": "^1.1.4",
12 |     "axios": "1.7.4",
13 |     "core-js": "^3.8.3",
14 |     "element-plus": "^2.1.6",
15 |     "tsload": "^1.0.0",
16 |     "vue": "^3.2.13",
17 |     "vue-class-component": "^8.0.0-0",
18 |     "vue-router": "^4.0.14",
19 |     "vuex": "^4.0.2",
20 |     "xgplayer": "^2.31.4",
21 |     "xgplayer-flv": "^2.5.1"
22 |   },
23 |   "devDependencies": {
24 |     "@babel/core": "^7.12.16",
25 |     "@babel/eslint-parser": "^7.12.16",
26 |     "@typescript-eslint/eslint-plugin": "^5.4.0",
27 |     "@typescript-eslint/parser": "^5.4.0",
28 |     "@vue/cli-plugin-babel": "~5.0.0",
29 |     "@vue/cli-plugin-eslint": "~5.0.0",
30 |     "@vue/cli-plugin-typescript": "~5.0.0",
31 |     "@vue/cli-service": "~5.0.0",
32 |     "@vue/eslint-config-typescript": "^9.1.0",
33 |     "eslint": "^7.32.0",
34 |     "eslint-plugin-vue": "^8.0.3",
35 |     "typescript": "~4.5.5"
36 |   },
37 |   "eslintConfig": {
38 |     "root": true,
39 |     "env": {
40 |       "node": true
41 |     },
42 |     "extends": [
43 |       "plugin:vue/vue3-essential",
44 |       "eslint:recommended",
45 |       "@vue/typescript"
46 |     ],
47 |     "parserOptions": {
48 |       "parser": "@typescript-eslint/parser"
49 |     },
50 |     "rules": {}
51 |   },
52 |   "browserslist": [
53 |     "> 1%",
54 |     "last 2 versions",
55 |     "not dead",
56 |     "not ie 11"
57 |   ]
58 | }
59 | 


--------------------------------------------------------------------------------
/src/components/DialogAddFace.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-dialog
  3 |       title="添加人脸"
  4 |       v-model="state.visible"
  5 |       width="400px"
  6 |       @close="handleClose"
  7 |   >
  8 |     <el-form :model="state.ruleForm" ref="formRef" label-width="50px">
  9 |       <el-form-item label="图片" prop="url">
 10 | 
 11 |         <el-upload
 12 |             class="avatar-uploader"
 13 |             :show-file-list="false"
 14 |             :before-upload="beforeUpload"
 15 |         >
 16 |           <img v-if="state.ruleForm.url" :src="state.ruleForm.url" class="avatar"/>
 17 |           <el-icon v-else class="avatar-uploader-icon">
 18 |             <Plus/>
 19 |           </el-icon>
 20 |         </el-upload>
 21 | 
 22 |       </el-form-item>
 23 |       <el-form-item label="姓名" prop="name">
 24 |         <el-input type="text" v-model="state.ruleForm.name"></el-input>
 25 |       </el-form-item>
 26 |     </el-form>
 27 |     <template #footer>
 28 |       <span class="dialog-footer">
 29 |         <el-button @click="state.visible = false">取 消</el-button>
 30 |         <el-button type="primary" @click="submitForm">确 定</el-button>
 31 |       </span>
 32 |     </template>
 33 |   </el-dialog>
 34 | </template>
 35 | 
 36 | <script lang="ts" setup>
 37 | import {reactive, ref, toRefs} from 'vue'
 38 | import axios from '@/utils/axios'
 39 | import {Plus} from '@element-plus/icons-vue'
 40 | import {ElMessage} from 'element-plus'
 41 | 
 42 | 
 43 | const props = defineProps({
 44 |   reload: Function
 45 | })
 46 | 
 47 | const formRef = ref<any>(null)
 48 | const state = reactive<any>({
 49 |   visible: false,
 50 |   ruleForm: {
 51 |     url: '',
 52 |     name: ''
 53 |   }
 54 | })
 55 | 
 56 | // 上传图片
 57 | const beforeUpload = (file: Blob) => {
 58 |   let reader = new FileReader();
 59 |   reader.readAsDataURL(file);//读取图像文件 result 为 DataURL, DataURL 可直接 赋值给 img.src
 60 |   reader.onload = function (event: any) {
 61 |     state.ruleForm.url = event.target.result
 62 |   }
 63 | }
 64 | // 开启弹窗
 65 | const open = () => {
 66 |   state.visible = true
 67 | }
 68 | // 关闭弹窗
 69 | const close = () => {
 70 |   state.visible = false
 71 | }
 72 | const handleClose = () => {
 73 |   formRef.value.resetFields()
 74 | }
 75 | const submitForm = () => {
 76 |   axios.post('/faceAdd', {
 77 |     name: state.ruleForm.name,
 78 |     image: state.ruleForm.url,
 79 |   }).then(() => {
 80 |     ElMessage.success('添加成功')
 81 |     state.visible = false
 82 |     if (props.reload) props.reload()
 83 |   })
 84 | 
 85 | }
 86 | </script>
 87 | 
 88 | <style>
 89 | .avatar-uploader .avatar {
 90 |   width: 100px;
 91 |   height: 100px;
 92 |   display: block;
 93 | }
 94 | 
 95 | .avatar-uploader .el-upload {
 96 |   border: 1px dashed #d9d9d9;
 97 |   border-radius: 6px;
 98 |   cursor: pointer;
 99 |   position: relative;
100 |   overflow: hidden;
101 |   transition: var(--el-transition-duration-fast);
102 | }
103 | 
104 | .avatar-uploader .el-upload:hover {
105 |   border-color: var(--el-color-primary);
106 | }
107 | 
108 | .el-icon.avatar-uploader-icon {
109 |   font-size: 28px;
110 |   color: #8c939d;
111 |   width: 100px;
112 |   height: 100px;
113 |   text-align: center;
114 | }
115 | </style>


--------------------------------------------------------------------------------
/src/views/FaceStream.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!--  <el-table :data="tableData" border style="width: 750px">-->
  3 |   <!--    <el-table-column type="index" label="序号" width="180px"/>-->
  4 |   <!--    <el-table-column prop="name" label="姓名" width="180px"/>-->
  5 |   <!--    <el-table-column-->
  6 |   <!--        label="注册照"-->
  7 |   <!--        width="210px">-->
  8 |   <!--      <template #default="scope">-->
  9 |   <!--        <img style="width: 180px;height: 60px;object-fit: contain;" :src="scope.row.url" alt="">-->
 10 |   <!--      </template>-->
 11 |   <!--    </el-table-column>-->
 12 |   <!--    <el-table-column label="操作" width="180px">-->
 13 |   <!--      <template #default="scope">-->
 14 |   <!--        <el-button v-if="scope.$index>1"-->
 15 |   <!--                   size="small"-->
 16 |   <!--                   type="danger"-->
 17 |   <!--                   @click="handleDelete(scope.$index, scope.row)"-->
 18 |   <!--        >删除-->
 19 |   <!--        </el-button-->
 20 |   <!--        >-->
 21 |   <!--      </template>-->
 22 |   <!--    </el-table-column>-->
 23 |   <!--  </el-table>-->
 24 | 
 25 |   <!--  <div style="width: 750px;align-content: center;  text-align: center; margin-top: 20px">-->
 26 |   <!--    <el-button type="primary" @click="handleAdd">添加注册照</el-button>-->
 27 |   <!--  </div>-->
 28 | 
 29 |   <div style="width: 640px; margin-top: 20px; ">
 30 |     <el-input style="width: 570px" v-model="state.inputText"
 31 |               placeholder="请输入播放地址:例：E:\FFOutput\06.mp4；rtsp:xxxxx；http://xxx.mp4等"/>
 32 |     <el-button style="width: 50px;margin-left: 20px" type="primary" @click="play">播放</el-button>
 33 | 
 34 |   </div>
 35 | 
 36 |   <div id="mse" style="width: 750px;height: 500px; margin-top: 20px; border: 1px solid black;">
 37 | 
 38 |   </div>
 39 | 
 40 |   <DialogAddFace ref='addFaceDialog' :reload="submit"/>
 41 | </template>
 42 | 
 43 | <script setup>
 44 | import {onMounted, onUnmounted, toRefs, reactive, ref} from 'vue'
 45 | import DialogAddFace from '@/components/DialogAddFace.vue'
 46 | import FlvJsPlayer from 'xgplayer-flv'
 47 | import {ElMessage} from 'element-plus'
 48 | 
 49 | const state = reactive({inputText: ''})
 50 | 
 51 | let tableData = ref([]);
 52 | const addFaceDialog = ref(null)
 53 | 
 54 | let player;
 55 | 
 56 | onMounted(() => {
 57 | 
 58 |   player = new FlvJsPlayer({
 59 |     "id": "mse",
 60 |     "url": "stream",
 61 |     width: 640,
 62 |     height: 500,
 63 |     isLive: true,
 64 |     playsinline: true,
 65 |   });
 66 | 
 67 | })
 68 | onUnmounted(() => {
 69 |   player.destroy();
 70 | })
 71 | 
 72 | const play = () => {
 73 |   if (state.inputText == '') {
 74 |     ElMessage.error('请输入播放地址')
 75 |   } else {
 76 |     player.destroy();
 77 |     player = new FlvJsPlayer({
 78 |       "id": "mse",
 79 |       "url": 'stream?address=' + encodeURIComponent(state.inputText),
 80 |       width: 640,
 81 |       height: 500,
 82 |       isLive: true,
 83 |       autoplay: true,
 84 |       playsinline: true,
 85 |     });
 86 |   }
 87 | }
 88 | 
 89 | const handleDelete = (index, row) => {
 90 |   console.log(index, row)
 91 |   tableData.value.splice(index, 1)
 92 | }
 93 | 
 94 | const handleAdd = () => {
 95 |   addFaceDialog.value.open()
 96 | }
 97 | 
 98 | const submit = () => {
 99 |   console.info("xxx")
100 | }
101 | 
102 | 
103 | </script>
104 | 
105 | <style scoped>
106 | 
107 | </style>


--------------------------------------------------------------------------------
/src/views/FaceRecognition.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="class_face_recognition">
  3 |     <el-container>
  4 |       <el-header>
  5 |         <div class="class_title">人脸识别示例</div>
  6 |       </el-header>
  7 | 
  8 |       <el-main>
  9 |         <div class="class_image__lazy">
 10 |           <el-image class="image__lazy" fit="contain" :src="state.imageSrc">
 11 |             <template #error>
 12 |               <div class="image-slot">
 13 |                 <el-icon>
 14 |                   <icon-picture/>
 15 |                 </el-icon>
 16 |               </div>
 17 |             </template>
 18 |           </el-image>
 19 |         </div>
 20 |       </el-main>
 21 |       <el-footer>
 22 | 
 23 |         <div class="class_select">
 24 |           <span style="margin-left: 20px;margin-right: 10px">选择下拉照片</span>
 25 |           <el-select v-model="state.selectValue" @change="selectChange" placeholder="Select">
 26 |             <el-option
 27 |                 v-for="item in state.imageOption"
 28 |                 :key="item.value"
 29 |                 :label="item.label"
 30 |                 :value="item.value"
 31 |             />
 32 |           </el-select>
 33 |         </div>
 34 | 
 35 |         <div class="class_select" style="margin-top: 20px">
 36 | 
 37 |           <el-upload
 38 |               class="upload-demo"
 39 |               :before-upload="beforeUpload"
 40 |               accept="image/png, image/jpeg"
 41 |           >
 42 |             <el-button type="primary">上传本地照片检测</el-button>
 43 |           </el-upload>
 44 | 
 45 |         </div>
 46 | 
 47 |       </el-footer>
 48 | 
 49 | 
 50 |     </el-container>
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script lang="ts" setup>
 55 | import {onMounted, toRefs, reactive} from 'vue'
 56 | import axios from '@/utils/axios'
 57 | 
 58 | const state = reactive({
 59 |   selectValue: 'images/Image1-1.jpg',
 60 |   imageSrc: '',
 61 |   imageOption: [{
 62 |     value: 'images/Image1-1.jpg',
 63 |     label: '照片1',
 64 |   }]
 65 | })
 66 | 
 67 | onMounted(() => {
 68 |   responseDrawImage(state.selectValue)
 69 | })
 70 | 
 71 | const selectChange = (value: string) => {
 72 |   responseDrawImage(value)
 73 | }
 74 | 
 75 | const beforeUpload = (file: Blob) => {
 76 |   let reader = new FileReader();
 77 |   reader.readAsDataURL(file);//读取图像文件 result 为 DataURL, DataURL 可直接 赋值给 img.src
 78 |   reader.onload = function (event: any) {
 79 |     responseDrawImage(event.target.result)
 80 |   }
 81 | }
 82 | 
 83 | const responseDrawImage = (src: string) => {
 84 | 
 85 |   let image = new Image();
 86 |   image.src = src;
 87 |   image.onload = function () {
 88 |     let canvas = document.createElement('canvas');
 89 |     canvas.width = image.width;
 90 |     canvas.height = image.height;
 91 |     let ctx: any = canvas.getContext("2d");
 92 |     ctx.drawImage(image, 0, 0, image.width, image.height)
 93 |     axios.post("/faceRecognition", {image: canvas.toDataURL("image/jpeg")})
 94 |         .then((response: any) => {
 95 |           if (response.code === 0 && response.data.length > 0) {
 96 |             response.data.forEach((r: any) => {
 97 |               let rect = r.rect;
 98 |               let x = rect.left;
 99 |               let y = rect.top;
100 |               let w = rect.right - rect.left;
101 |               let h = rect.bottom - rect.top;
102 |               ctx.strokeStyle = "#FF0000";
103 |               ctx.lineWidth = 5;
104 |               ctx.strokeRect(x, y, w, h);
105 |               ctx.fillStyle = "#FF0000";
106 |               ctx.font = "30px Georgia";
107 |               ctx.fillText(r.name == undefined ? '未知' : r.name, x, y - 10);
108 | 
109 |             });
110 |           }
111 |           state.imageSrc = canvas.toDataURL("image/jpeg");
112 | 
113 |         });
114 |   }
115 | 
116 | }
117 | </script>
118 | 
119 | <style scoped>
120 | 
121 | .class_face_recognition .class_title {
122 |   font-size: 25px;
123 |   margin-top: 20px;
124 |   margin-left: 20px;
125 |   width: 800px;
126 |   text-align: center;
127 | }
128 | 
129 | .class_face_recognition .class_image__lazy {
130 | 
131 |   width: 800px;
132 |   height: 500px;
133 |   margin-left: 20px;
134 |   border: 1px solid black;
135 | }
136 | 
137 | .class_face_recognition .image__lazy {
138 |   width: 800px;
139 |   height: 500px;
140 | }
141 | 
142 | .class_face_recognition .class_select {
143 |   margin-left: 20px;
144 |   width: 800px;
145 |   text-align: center;
146 | }
147 | 
148 | </style>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="layout">
  3 |     <el-container v-if="state.showMenu" class="container">
  4 |       <el-aside class="aside">
  5 |         <div class="head">
  6 |           <div>
  7 |             <span>人脸识别系统</span>
  8 |           </div>
  9 |         </div>
 10 |         <div class="line"/>
 11 |         <el-menu
 12 |             :default-openeds="state.defaultOpen"
 13 |             background-color="#222832"
 14 |             text-color="#fff"
 15 |             :router="true"
 16 |             :default-active='state.currentPath'
 17 |         >
 18 |           <el-submenu index="1">
 19 |             <el-menu-item-group>
 20 |               <el-menu-item index="/faceDetect">
 21 |                 <el-icon>
 22 |                   <Avatar/>
 23 |                 </el-icon>
 24 |                 人脸检测
 25 |               </el-menu-item>
 26 |               <el-menu-item index="/faceCompare">
 27 |                 <el-icon>
 28 |                   <User/>
 29 |                 </el-icon>
 30 |                 人脸相似度
 31 |               </el-menu-item>
 32 |               <el-menu-item index="/faceRecognition">
 33 |                 <el-icon>
 34 |                   <Cherry/>
 35 |                 </el-icon>
 36 |                 人脸识别
 37 |               </el-menu-item>
 38 |               <el-menu-item index="/faceStream">
 39 |                 <el-icon :size='20'>
 40 |                   <Opportunity/>
 41 |                 </el-icon>
 42 |                 视频流识别
 43 |               </el-menu-item>
 44 |             </el-menu-item-group>
 45 |           </el-submenu>
 46 |         </el-menu>
 47 |       </el-aside>
 48 |       <el-container class="content">
 49 |         <!--        <Header/>-->
 50 |         <div class="main">
 51 |           <router-view/>
 52 |         </div>
 53 |       </el-container>
 54 |     </el-container>
 55 |     <el-container v-else class="container">
 56 |       <router-view/>
 57 |     </el-container>
 58 |   </div>
 59 | </template>
 60 | 
 61 | <script lang="ts" setup>
 62 | import {onUnmounted, onMounted, reactive} from 'vue'
 63 | import {NavigationGuardNext, RouteLocationNormalized, useRouter} from 'vue-router'
 64 | import {User, Avatar, Opportunity, Cherry} from '@element-plus/icons-vue'
 65 | 
 66 | console.log('App')
 67 | const router = useRouter()
 68 | const state = reactive<any>({
 69 |   defaultOpen: ['1'],
 70 |   showMenu: true,
 71 |   currentPath: '/',
 72 |   count: {
 73 |     number: 1
 74 |   }
 75 | })
 76 | 
 77 | 
 78 | const unwatch = router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
 79 |   next()
 80 |   state.currentPath = to.path
 81 | })
 82 | 
 83 | onUnmounted(() => {
 84 |   unwatch()
 85 | })
 86 | 
 87 | </script>
 88 | 
 89 | <style scoped>
 90 | .layout {
 91 |   min-height: 100vh;
 92 |   background-color: #ffffff;
 93 | }
 94 | 
 95 | .container {
 96 |   height: 100vh;
 97 | }
 98 | 
 99 | .aside {
100 |   width: 200px !important;
101 |   background-color: #222832;
102 |   overflow: hidden;
103 |   overflow-y: auto;
104 |   -ms-overflow-style: none;
105 |   overflow: -moz-scrollbars-none;
106 | }
107 | 
108 | .aside::-webkit-scrollbar {
109 |   display: none;
110 | }
111 | 
112 | .head {
113 |   display: flex;
114 |   align-items: center;
115 |   justify-content: center;
116 |   height: 50px;
117 | }
118 | 
119 | .head > div {
120 |   display: flex;
121 |   align-items: center;
122 | }
123 | 
124 | .head img {
125 |   width: 50px;
126 |   height: 50px;
127 |   margin-right: 10px;
128 | }
129 | 
130 | .head span {
131 |   font-size: 20px;
132 |   color: #ffffff;
133 | }
134 | 
135 | .line {
136 |   border-top: 1px solid hsla(0, 0%, 100%, .05);
137 |   border-bottom: 1px solid rgba(0, 0, 0, .2);
138 | }
139 | 
140 | .content {
141 |   display: flex;
142 |   flex-direction: column;
143 |   max-height: 100vh;
144 |   overflow: hidden;
145 | }
146 | 
147 | .main {
148 |   height: calc(100vh - 100px);
149 |   overflow: auto;
150 |   padding: 10px;
151 | }
152 | </style>
153 | <style>
154 | body {
155 |   padding: 0;
156 |   margin: 0;
157 |   box-sizing: border-box;
158 | }
159 | 
160 | .el-menu {
161 |   border-right: none !important;
162 | }
163 | 
164 | .el-submenu {
165 |   border-top: 1px solid hsla(0, 0%, 100%, .05);
166 |   border-bottom: 1px solid rgba(0, 0, 0, .2);
167 | }
168 | 
169 | .el-submenu:first-child {
170 |   border-top: none;
171 | }
172 | 
173 | .el-submenu [class^="el-icon-"] {
174 |   vertical-align: -1px !important;
175 | }
176 | 
177 | a {
178 |   color: #409eff;
179 |   text-decoration: none;
180 | }
181 | 
182 | .el-pagination {
183 |   text-align: center;
184 |   margin-top: 20px;
185 | }
186 | 
187 | .el-popper__arrow {
188 |   display: none;
189 | }
190 | </style>
191 | 


--------------------------------------------------------------------------------
/src/views/FaceDetect.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="class_face_detect">
  3 |     <el-container>
  4 |       <el-header>
  5 |         <div class="class_title">人脸检测示例</div>
  6 |       </el-header>
  7 | 
  8 |       <el-main>
  9 |         <div class="class_image__lazy">
 10 |           <el-image class="image__lazy" fit="contain" :src="state.imageSrc">
 11 |             <template #error>
 12 |               <div class="image-slot">
 13 |                 <el-icon>
 14 |                   <icon-picture/>
 15 |                 </el-icon>
 16 |               </div>
 17 |             </template>
 18 |           </el-image>
 19 |         </div>
 20 |       </el-main>
 21 |       <el-footer>
 22 | 
 23 |         <div class="class_select">
 24 |           <span style="margin-left: 20px;margin-right: 10px">选择下拉照片</span>
 25 |           <el-select v-model="state.selectValue" @change="selectChange" placeholder="Select">
 26 |             <el-option
 27 |                 v-for="item in state.imageOption"
 28 |                 :key="item.value"
 29 |                 :label="item.label"
 30 |                 :value="item.value"
 31 |             />
 32 |           </el-select>
 33 |         </div>
 34 | 
 35 |         <div class="class_select" style="margin-top: 20px">
 36 | 
 37 |           <el-upload
 38 |               class="upload-demo"
 39 |               :before-upload="beforeUpload"
 40 |               accept="image/png, image/jpeg"
 41 |               :show-file-list="false"
 42 |           >
 43 |             <el-button type="primary">上传本地照片检测</el-button>
 44 |           </el-upload>
 45 | 
 46 |         </div>
 47 | 
 48 |       </el-footer>
 49 | 
 50 | 
 51 |     </el-container>
 52 |   </div>
 53 | </template>
 54 | 
 55 | <script lang="ts" setup>
 56 | import {onMounted, reactive, toRefs} from 'vue'
 57 | import axios from '@/utils/axios'
 58 | 
 59 | const state = reactive({
 60 |   selectValue: 'images/Image1-1.jpg',
 61 |   imageSrc: '',
 62 |   imageOption: [{
 63 |     value: 'images/Image1-1.jpg',
 64 |     label: 'Image1-1.jpg',
 65 |   },
 66 |     {
 67 |       value: 'images/Image2-1.jpg',
 68 |       label: 'Image2-1.jpg'
 69 |     },
 70 |     {
 71 |       value: 'images/Image3-1.jpg',
 72 |       label: 'Image3-1.jpg',
 73 |     },]
 74 | })
 75 | 
 76 | onMounted(() => {
 77 |   responseDrawImage(state.selectValue)
 78 | })
 79 | 
 80 | const selectChange = (value: string) => {
 81 |   responseDrawImage(value)
 82 | }
 83 | 
 84 | const beforeUpload = (file: Blob) => {
 85 |   let reader = new FileReader();
 86 |   reader.readAsDataURL(file);//读取图像文件 result 为 DataURL, DataURL 可直接 赋值给 img.src
 87 |   reader.onload = function (event: any) {
 88 |     responseDrawImage(event.target.result)
 89 |   }
 90 | }
 91 | 
 92 | const responseDrawImage = (src: string) => {
 93 | 
 94 |   let image = new Image();
 95 |   image.src = src;
 96 |   image.onload = function () {
 97 |     let canvas = document.createElement('canvas');
 98 |     canvas.width = image.width;
 99 |     canvas.height = image.height;
100 |     let ctx: any = canvas.getContext("2d");
101 |     ctx.drawImage(image, 0, 0, image.width, image.height)
102 |     axios.post("/detectFaces", {image: canvas.toDataURL("image/jpeg")})
103 |         .then((response: any) => {
104 |           if (response.code === 0 && response.data.length > 0) {
105 |             response.data.forEach((r: any) => {
106 |               let rect = r.rect;
107 |               let x = rect.left;
108 |               let y = rect.top;
109 |               let w = rect.right - rect.left;
110 |               let h = rect.bottom - rect.top;
111 |               ctx.strokeStyle = "#FF0000";
112 |               ctx.lineWidth = 5;
113 |               ctx.strokeRect(x, y, w, h);
114 |               let gender = '未知'
115 |               if (r.gender === 0) {
116 |                 gender = '男'
117 |               } else if (r.gender === 1) {
118 |                 gender = '女'
119 |               }
120 | 
121 |               let liveness = '-';
122 |               if (r.liveness == 1) {
123 |                 liveness = '活体'
124 |               } else if (r.liveness == 0) {
125 |                 liveness = '非活体'
126 |               }
127 | 
128 |               let txt = '性别:' + gender + '，年龄:' + r.age + '，' + liveness;
129 |               ctx.fillStyle = "#FF0000";
130 |               ctx.font = "20px Georgia";
131 |               ctx.fillText(txt, x, y - 10);
132 |               console.info("detectSuccess")
133 | 
134 |             });
135 |           }
136 |           state.imageSrc = canvas.toDataURL("image/jpeg");
137 | 
138 |         });
139 |   }
140 | }
141 | </script>
142 | 
143 | <style scoped>
144 | 
145 | .class_face_detect .class_title {
146 |   font-size: 25px;
147 |   margin-top: 20px;
148 |   margin-left: 20px;
149 |   width: 800px;
150 |   text-align: center;
151 | }
152 | 
153 | .class_face_detect .class_image__lazy {
154 | 
155 |   width: 800px;
156 |   height: 500px;
157 |   margin-left: 20px;
158 |   border: 1px solid black;
159 | }
160 | 
161 | .class_face_detect .image__lazy {
162 |   width: 800px;
163 |   height: 500px;
164 | }
165 | 
166 | .class_face_detect .class_select {
167 |   margin-left: 20px;
168 |   width: 800px;
169 |   text-align: center;
170 | }
171 | 
172 | </style>


--------------------------------------------------------------------------------
/src/views/FaceCompare.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 
  3 | 
  4 |   <div class="demo-image__placeholder">
  5 |     <div class="block">
  6 |       <span class="demonstration">照片1</span>
  7 |       <el-image :src="state.imageSrc1" fit="contain" class="compare_class_image__lazy">
  8 |         <template #placeholder>
  9 |           <div class="image-slot">Loading<span class="dot">...</span></div>
 10 |         </template>
 11 |       </el-image>
 12 |       <div class="compare_class_select">
 13 |         <span style="margin-right: 10px">选择下拉照片</span>
 14 |         <el-select v-model="state.selectValue1" @change="selectChange(1)" placeholder="Select">
 15 |           <el-option
 16 |               v-for="item in state.imageOption1"
 17 |               :key="item.value"
 18 |               :label="item.label"
 19 |               :value="item.value"
 20 |           />
 21 |         </el-select>
 22 |       </div>
 23 | 
 24 |       <div class="compare_class_select" style="margin-top: 20px">
 25 | 
 26 |         <el-upload
 27 |             class="upload-demo"
 28 |             :before-upload="beforeUpload1"
 29 |             accept="image/png, image/jpeg"
 30 |         >
 31 |           <el-button type="primary">上传本地照片检测</el-button>
 32 |         </el-upload>
 33 | 
 34 |       </div>
 35 |     </div>
 36 |     <div class="block">
 37 |       <span class="demonstration">照片2</span>
 38 |       <el-image :src="state.imageSrc2" fit="contain" class="compare_class_image__lazy">
 39 |         <template #placeholder>
 40 |           <div class="image-slot">Loading<span class="dot">...</span></div>
 41 |         </template>
 42 |       </el-image>
 43 |       <div class="compare_class_select">
 44 |         <span style="margin-right: 10px">选择下拉照片</span>
 45 |         <el-select v-model="state.selectValue2" @change="selectChange(2)" placeholder="Select">
 46 |           <el-option
 47 |               v-for="item in state.imageOption2"
 48 |               :key="item.value"
 49 |               :label="item.label"
 50 |               :value="item.value"
 51 |           />
 52 |         </el-select>
 53 |       </div>
 54 | 
 55 |       <div class="compare_class_select" style="margin-top: 20px">
 56 |         <el-upload
 57 |             class="upload-demo"
 58 |             :before-upload="beforeUpload2"
 59 |             accept="image/png, image/jpeg"
 60 |         >
 61 |           <el-button type="primary">上传本地照片检测</el-button>
 62 |         </el-upload>
 63 | 
 64 |       </div>
 65 |     </div>
 66 |   </div>
 67 |   <div style="width: 100%;text-align: center;margin-top: 20px;margin-bottom: 20px;font-size: 20px">
 68 | 
 69 |     <span>人脸相似度为: {{ state.similar }}</span>
 70 | 
 71 |   </div>
 72 | 
 73 | </template>
 74 | 
 75 | <script lang="ts" setup>
 76 | import {onMounted, toRefs, reactive, ref} from 'vue'
 77 | import axios from '@/utils/axios'
 78 | 
 79 | 
 80 | const state = reactive({
 81 |   similar: '0',
 82 |   imageSrc1: 'images/Image1-1.jpg',
 83 |   imageSrc2: 'images/Image1-2.jpg',
 84 |   selectValue1: 'Image1-1.jpg',
 85 |   selectValue2: 'Image1-2.jpg',
 86 |   imageOption1: [{
 87 |     value: 'images/Image1-1.jpg',
 88 |     label: 'Image1-1.jpg'
 89 |   },
 90 |     {
 91 |       value: 'images/Image2-1.jpg',
 92 |       label: 'Image2-1.jpg'
 93 |     },
 94 |     {
 95 |       value: 'images/Image3-1.jpg',
 96 |       label: 'Image3-1.jpg'
 97 |     }],
 98 |   imageOption2: [{
 99 |     value: 'images/Image1-2.jpg',
100 |     label: 'Image1-2.jpg'
101 |   },
102 |     {
103 |       value: 'images/Image2-2.jpg',
104 |       label: 'Image2-2.jpg'
105 |     },
106 |     {
107 |       value: 'images/Image3-2.jpg',
108 |       label: 'Image3-2.jpg',
109 |     },]
110 | })
111 | 
112 | onMounted(() => {
113 |   responseDrawImage()
114 | })
115 | 
116 | const selectChange = (value: number) => {
117 |   if (value === 1) {
118 |     state.imageSrc1 = state.selectValue1
119 |   } else if (value === 2) {
120 |     state.imageSrc2 = state.selectValue2
121 |   }
122 |   responseDrawImage()
123 | }
124 | 
125 | const beforeUpload1 = (file: Blob) => {
126 |   let reader = new FileReader();
127 |   reader.readAsDataURL(file);//读取图像文件 result 为 DataURL, DataURL 可直接 赋值给 img.src
128 |   reader.onload = function (event: any) {
129 |     state.imageSrc1 = event.target.result
130 |     responseDrawImage()
131 |   }
132 | }
133 | const beforeUpload2 = (file: Blob) => {
134 |   let reader = new FileReader();
135 |   reader.readAsDataURL(file);//读取图像文件 result 为 DataURL, DataURL 可直接 赋值给 img.src
136 |   reader.onload = function (event: any) {
137 |     state.imageSrc2 = event.target.result
138 |     responseDrawImage()
139 |   }
140 | }
141 | 
142 | const responseDrawImage = () => {
143 | 
144 |   let image1 = new Image();
145 |   image1.src = state.imageSrc1;
146 |   image1.onload = function () {
147 |     let canvas1 = document.createElement('canvas');
148 |     canvas1.width = image1.width;
149 |     canvas1.height = image1.height;
150 |     let ctx1: any = canvas1.getContext("2d");
151 |     ctx1.drawImage(image1, 0, 0, image1.width, image1.height)
152 | 
153 | 
154 |     let image2 = new Image();
155 |     image2.src = state.imageSrc2;
156 |     image2.onload = function () {
157 |       let canvas2 = document.createElement('canvas');
158 |       canvas2.width = image2.width;
159 |       canvas2.height = image2.height;
160 |       let ctx2: any = canvas2.getContext("2d");
161 |       ctx2.drawImage(image2, 0, 0, image2.width, image2.height)
162 | 
163 | 
164 |       axios.post("/compareFaces",
165 |           {
166 |             image1: canvas1.toDataURL("image/jpeg"),
167 |             image2: canvas2.toDataURL("image/jpeg")
168 |           }
169 |       ).then((response: any) => {
170 |         console.info(response)
171 |         if (response.code === 0) {
172 |           state.similar = response.data
173 |         } else {
174 |           state.similar = response.msg
175 |         }
176 |       });
177 |     }
178 |   }
179 | 
180 | }
181 | </script>
182 | 
183 | <style scoped>
184 | .demo-image__placeholder .compare_class_image__lazy {
185 | 
186 |   width: 100%;
187 |   height: 300px;
188 |   /*margin-left: 20px;*/
189 |   border: 1px solid black;
190 | }
191 | 
192 | .demo-image__placeholder .block {
193 |   padding: 30px 0;
194 |   text-align: center;
195 |   border-right: solid 1px var(--el-border-color);
196 |   display: inline-block;
197 |   width: 49%;
198 |   box-sizing: border-box;
199 |   vertical-align: top;
200 | 
201 |   /*border: 1px solid black;*/
202 | }
203 | 
204 | .demo-image__placeholder .demonstration {
205 |   display: block;
206 |   font-size: 18px;
207 |   margin-bottom: 20px;
208 | }
209 | 
210 | .demo-image__placeholder .el-image {
211 |   padding: 0 5px;
212 |   max-width: 500px;
213 |   max-height: 500px;
214 | }
215 | 
216 | .demo-image__placeholder.image-slot {
217 |   display: flex;
218 |   justify-content: center;
219 |   align-items: center;
220 |   width: 100%;
221 |   height: 100%;
222 |   background: var(--el-fill-color-light);
223 |   color: var(--el-text-color-secondary);
224 |   font-size: 14px;
225 | }
226 | 
227 | .demo-image__placeholder .dot {
228 |   animation: dot 2s infinite steps(3, start);
229 |   overflow: hidden;
230 | }
231 | 
232 | .compare_class_select {
233 |   margin-top: 20px;
234 |   /*width: 800px;*/
235 |   /*text-align: center;*/
236 | }
237 | 
238 | </style>


--------------------------------------------------------------------------------