<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>人脸识别考勤 - 人脸录入模块</title>
|
<style>
|
body {
|
font-family: Arial, sans-serif;
|
margin: 20px;
|
}
|
.container {
|
max-width: 600px;
|
margin: auto;
|
padding: 20px;
|
border: 1px solid #ccc;
|
border-radius: 8px;
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
}
|
h1 {
|
text-align: center;
|
color: #333;
|
}
|
.form-group {
|
margin-bottom: 15px;
|
}
|
label {
|
display: block;
|
margin-bottom: 5px;
|
font-weight: bold;
|
}
|
input[type="text"], button {
|
width: 100%;
|
padding: 10px;
|
font-size: 16px;
|
border: 1px solid #ccc;
|
border-radius: 4px;
|
}
|
button {
|
background-color: #007bff;
|
color: white;
|
cursor: pointer;
|
}
|
button:hover {
|
background-color: #0056b3;
|
}
|
.camera-preview {
|
margin-top: 20px;
|
text-align: center;
|
}
|
.camera-preview video {
|
max-width: 100%;
|
height: auto;
|
border: 1px solid #ccc;
|
border-radius: 4px;
|
}
|
.image-preview {
|
margin-top: 20px;
|
text-align: center;
|
}
|
.image-preview img {
|
max-width: 100%;
|
height: auto;
|
border: 1px solid #ccc;
|
border-radius: 4px;
|
}
|
.status-message {
|
margin-top: 15px;
|
text-align: center;
|
font-size: 14px;
|
color: #555;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="container">
|
<h1>人脸识别考勤 - 人脸录入模块</h1>
|
|
<!-- 工号输入 -->
|
<div class="form-group">
|
<label for="employee-id">输入工号:</label>
|
<input type="text" id="employee-id" placeholder="请输入工号">
|
</div>
|
|
<!-- 查询信息按钮 -->
|
<button onclick="searchUserInfo()">查询信息</button>
|
|
<!-- 用户信息展示 -->
|
<div class="form-group" id="user-info" style="display: none;">
|
<label>用户信息:</label>
|
<p id="user-details"></p>
|
</div>
|
|
<!-- 模拟摄像头抓取图片 -->
|
<div class="camera-preview" id="camera-preview" style="display: none;">
|
<video id="camera-video" autoplay playsinline></video>
|
<div>
|
<button onclick="captureImage('front')">抓取正脸</button>
|
<button onclick="captureImage('left')">抓取左侧脸</button>
|
<button onclick="captureImage('right')">抓取右侧脸</button>
|
</div>
|
</div>
|
|
<!-- 图片预览 -->
|
<div class="image-preview" id="image-preview" style="display: none;">
|
<h3>抓取的图片预览</h3>
|
<div id="captured-images">
|
<img id="front-image" src="" alt="正脸图片" style="display: none;">
|
<img id="left-image" src="" alt="左侧脸图片" style="display: none;">
|
<img id="right-image" src="" alt="右侧脸图片" style="display: none;">
|
</div>
|
</div>
|
|
<!-- 提交按钮 -->
|
<button onclick="submitData()" style="display: none;" id="submit-btn">提交</button>
|
|
<!-- 状态消息 -->
|
<div class="status-message" id="status-message"></div>
|
</div>
|
|
<script>
|
let cameraStream = null;
|
|
// 模拟查询用户信息
|
function searchUserInfo() {
|
const employeeId = document.getElementById('employee-id').value;
|
if (!employeeId) {
|
alert('请输入工号');
|
return;
|
}
|
|
// 模拟查询结果
|
const userInfo = {
|
id: employeeId,
|
name: '张三',
|
department: '技术部'
|
};
|
|
// 显示用户信息
|
document.getElementById('user-details').innerText = `姓名: ${userInfo.name}, 部门: ${userInfo.department}`;
|
document.getElementById('user-info').style.display = 'block';
|
|
// 显示摄像头
|
startCamera();
|
}
|
|
// 打开摄像头
|
async function startCamera() {
|
try {
|
cameraStream = await navigator.mediaDevices.getUserMedia({ video: true });
|
const videoElement = document.getElementById('camera-video');
|
videoElement.srcObject = cameraStream;
|
document.getElementById('camera-preview').style.display = 'block';
|
} catch (error) {
|
alert('无法访问摄像头，请检查权限或设备是否可用。');
|
console.error('摄像头访问失败:', error);
|
}
|
}
|
|
// 抓取图片
|
function captureImage(faceType) {
|
const videoElement = document.getElementById('camera-video');
|
const canvas = document.createElement('canvas');
|
canvas.width = videoElement.videoWidth;
|
canvas.height = videoElement.videoHeight;
|
const context = canvas.getContext('2d');
|
context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
|
|
// 将抓取的图片显示在页面中
|
const imageUrl = canvas.toDataURL('image/png');
|
const imageElement = document.getElementById(`${faceType}-image`);
|
imageElement.src = imageUrl;
|
imageElement.style.display = 'block';
|
|
// 如果三张图片都已抓取，显示提交按钮
|
const frontImage = document.getElementById('front-image').src;
|
const leftImage = document.getElementById('left-image').src;
|
const rightImage = document.getElementById('right-image').src;
|
if (frontImage && leftImage && rightImage) {
|
document.getElementById('submit-btn').style.display = 'block';
|
}
|
}
|
|
// 模拟提交数据
|
function submitData() {
|
const employeeId = document.getElementById('employee-id').value;
|
if (!employeeId) {
|
alert('请先输入工号并查询信息');
|
return;
|
}
|
|
// 模拟上传图片和提交数据
|
const statusMessage = document.getElementById('status-message');
|
statusMessage.innerText = '正在上传图片并提交数据...';
|
|
setTimeout(() => {
|
statusMessage.innerText = '提交成功！';
|
}, 2000); // 模拟上传延迟
|
}
|
</script>
|
</body>
|
</html>
|
