人脸识别

This commit is contained in:
2025-08-18 09:05:27 +08:00
parent e58abcbf89
commit def6f87d7d
8 changed files with 17044 additions and 153 deletions
@@ -1,4 +1,4 @@
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FaceRecognition.aspx.cs" Inherits="FineUIPro.Web.WeldMat.UsingSentMat.FaceRecognition" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FaceRecognition.aspx.cs" Inherits="FineUIPro.Web.HJGL.MaterialManage.FaceRecognition" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
@@ -14,135 +14,169 @@
button { padding: 8px 16px; margin: 5px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<f:PageManager ID="PageManager1" AutoSizePanelID="Panel1" runat="server" />
<body >
<form id="form1" runat="server" style="text-align:center">
<%-- <f:PageManager ID="PageManager1" AutoSizePanelID="Panel1" runat="server" />
<f:Panel ID="Panel1" runat="server" ShowBorder="false" ShowHeader="false" Layout="Region">
<Items>
<f:Panel runat="server" ID="panelCenterRegion" RegionPosition="Center" ShowBorder="true"
Layout="VBox" ShowHeader="true" BodyPadding="5px" IconFont="PlusCircle" Title="人脸识别"
Layout="VBox" ShowHeader="true" BodyPadding="5px" IconFont="PlusCircle" Title="人脸识别"
TitleToolTip="人脸识别" AutoScroll="true">
<Items>
<f:ContentPanel ShowBorder="false" ShowHeader="false" ID="ContentPanel1" runat ="server" CssStyle="text-align:center" >
<video id="video" width="480" height="640" autoplay></video>
<canvas id="canvas" width="480" height="640" style="display:none" ></canvas>
<div>
--%> <video id="video" width="480" height="640" style="display:none" autoplay ></video>
<canvas id="canvas" width="480" height="640" ></canvas>
<%-- <div>
<button id="captureBtn" type="button">识别</button>
</div>
</f:ContentPanel>
</f:ContentPanel>
</Items>
</f:Panel>
</Items>
</f:Panel>
</f:Panel> --%>
</form>
<script src="../../res/js/jquery-3.2.1.min.js"></script>
<script src="../../res/js/ccv.js"></script>
<script src="../../res/js/cascade.js"></script>
<script src="../../res/js/jquery.facedetection.js"></script>
<script type="text/javascript">
// 返回false,来阻止浏览器右键菜单
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const captureBtn = document.getElementById('captureBtn');
const ctx = canvas.getContext('2d');
let stream = null;
//// 返回false,来阻止浏览器右键菜单
setTimeout(async () => {
try {
stream = await navigator.mediaDevices.getUserMedia({
video: {
width: { ideal:480 },
height: { ideal:640 },
facingMode: "environment" // 后置摄像头
},
audio: false
});
video.srcObject = stream;
} catch (err) {
console.log("摄像头访问错误:", err);
alert(`无法访问摄像头: ${err.message}`);
}
}, 1000)
$(function () {
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const captureBtn = document.getElementById('captureBtn');
const context = canvas.getContext('2d');
let stream = null;
// 截图功能
document.getElementById('captureBtn').addEventListener('click', () => {
if (!stream) return alert('请先开启摄像头');
if (captureBtn.innerHTML == '识别') {
captureBtn.innerHTML = '重新识别'
canvas.style = "";
video.style = "display:none";
// 适配高DPI屏幕
const scale = window.devicePixelRatio || 1;
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
ctx.scale(scale, scale);
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
// 生成图片下载链接
const imgUrl = canvas.toDataURL('image/jpeg');
upLoadFile(imgUrl)
//const link = document.createElement('a');
//link.download = 'capture-' + new Date().getTime() + '.jpg';
//link.href = imgUrl;
//link.click();
} else {
captureBtn.innerHTML = '识别'
video.style = "";
canvas.style = "display:none";
}
});
function upLoadFile(data) {
$.ajax({
url: "FaceRecognition.aspx/UploadData",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({
data: data
}),
success: function (data) {
/*window.parent.backData(data.d)*/
if (data.d.indexOf('识别失败') !== -1) {
alert('识别失败请重新识别')
}
else {
// window.location.href = 'UsingMat.aspx?welderQRCode=' + data.d ;
//window.open('UsingMat.aspx?welderCode=' + data.d , '_blank');
//var activeWindow = F.getActiveWindow();
//activeWindow.window.backData(data.d);
//activeWindow.hide();
var node = {
iframeUrl: './WeldMat/UsingSentMat/UsingMat.aspx?welderCode=' + data.d,
title: "焊材领用",
id: "UsingMat" + getFormattedDate()
};
window.parent.addExampleTab(node);
}
setTimeout(async () => {
try {
stream = await navigator.mediaDevices.getUserMedia({
video: {
width: { ideal: 480 },
height: { ideal: 640 },
facingMode: "environment" // 后置摄像头
},
audio: false
});
video.srcObject = stream;
} catch (err) {
console.log("摄像头访问错误:", err);
alert(`无法访问摄像头: ${err.message}`);
}
})
}
function getFormattedDate() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
return year + month + day + hours + minutes + seconds;
}
}, 1000)
is_stop = 0
video.ontimeupdate = function () {
if (is_stop) return
context.drawImage(video, 0, 0, video.width, video.height);
var base64 = canvas.toDataURL('images/png');
$('#canvas').faceDetection({
complete: function (faces) {
if (faces.length >= 1) {
is_stop = 1;
draw_face_box(faces)
//upload(base64)
const imgUrl = canvas.toDataURL('image/jpeg');
upLoadFile(imgUrl)
}
console.log(faces)
}
});
}
//画出人脸区域
function draw_face_box(faces) {
var rect;
var i;
debugger
//context.clearRect(0, 0, canvas.width, canvas.height);
for (i = 0; i < faces.length; i++) {
rect = faces[i];
context.strokeStyle = '#a64ceb';
if (rect.width < 60) return
context.strokeRect(rect.x - 10, rect.y - 40, rect.width + 10, rect.height + 40);
// context.font = '11px Helvetica';
// context.fillStyle = "#fff";
// context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
// context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
}
}
// 截图功能
document.getElementById('captureBtn').addEventListener('click', () => {
if (!stream) return alert('请先开启摄像头');
if (captureBtn.innerHTML == '识别') {
captureBtn.innerHTML = '重新识别'
canvas.style = "";
video.style = "display:none";
// 适配高DPI屏幕
const scale = window.devicePixelRatio || 1;
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
context.scale(scale, scale);
context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
// 生成图片下载链接
const imgUrl = canvas.toDataURL('image/jpeg');
upLoadFile(imgUrl)
//const link = document.createElement('a');
//link.download = 'capture-' + new Date().getTime() + '.jpg';
//link.href = imgUrl;
//link.click();
} else {
captureBtn.innerHTML = '识别'
video.style = "";
canvas.style = "display:none";
}
});
function upLoadFile(data) {
$.ajax({
url: "FaceRecognition.aspx/UploadData",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({
data: data
}),
success: function (data) {
/*window.parent.backData(data.d)*/
if (data.d.indexOf('识别失败') !== -1) {
//alert('识别失败请重新识别')
is_stop = 0
}
else {
// window.location.href = 'UsingMat.aspx?welderQRCode=' + data.d ;
//window.open('UsingMat.aspx?welderCode=' + data.d , '_blank');
//var activeWindow = F.getActiveWindow();
//activeWindow.window.backData(data.d);
//activeWindow.hide();
window.location.href = 'UsingMat.aspx?welderCode=' + data.d;
}
}
})
}
})
</script>
</body>
</html>
@@ -7,7 +7,7 @@
// </自动生成>
//------------------------------------------------------------------------------
namespace FineUIPro.Web.WeldMat.UsingSentMat
namespace FineUIPro.Web.HJGL.MaterialManage
{
@@ -40,41 +40,5 @@ namespace FineUIPro.Web.WeldMat.UsingSentMat
/// 若要进行修改,请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::System.Web.UI.HtmlControls.HtmlForm form1;
/// <summary>
/// PageManager1 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改,请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::FineUIPro.PageManager PageManager1;
/// <summary>
/// Panel1 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改,请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::FineUIPro.Panel Panel1;
/// <summary>
/// panelCenterRegion 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改,请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::FineUIPro.Panel panelCenterRegion;
/// <summary>
/// ContentPanel1 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改,请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::FineUIPro.ContentPanel ContentPanel1;
}
}
@@ -98,6 +98,14 @@
}
function welderFaceLogin() {
window.location.href = 'FaceRecognition.aspx';
// window.location.href = 'FaceRecognition.aspx';
var node = {
iframeUrl: './WeldMat/UsingSentMat/FaceRecognition.aspx',
title: "人脸识别",
id: "UsingMat" + Date.now().toString()
};
window.parent.addExampleTab(node);
}
</script>