184 lines
7.2 KiB
Plaintext
184 lines
7.2 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FaceRecognition.aspx.cs" Inherits="FineUIPro.Web.WeldMat.UsingSentMat.FaceRecognition" %>
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head id="Head1" runat="server">
|
|||
|
|
<title>人脸识别</title>
|
|||
|
|
<style id="Style1" runat="server" type="text/css">
|
|||
|
|
.title
|
|||
|
|
{
|
|||
|
|
font-size:14pt;
|
|||
|
|
font-weight:bold;
|
|||
|
|
text-align:center;
|
|||
|
|
}
|
|||
|
|
video, canvas { border: 1px solid #ccc; margin: 10px; }
|
|||
|
|
button { padding: 8px 16px; margin: 5px; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<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="人脸识别"
|
|||
|
|
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" style="display:none" autoplay ></video>
|
|||
|
|
<canvas id="canvas" width="480" height="640" ></canvas>
|
|||
|
|
<%-- <div>
|
|||
|
|
<button id="captureBtn" type="button">识别</button>
|
|||
|
|
</div>
|
|||
|
|
</f:ContentPanel>
|
|||
|
|
</Items>
|
|||
|
|
</f:Panel>
|
|||
|
|
</Items>
|
|||
|
|
</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，来阻止浏览器右键菜单
|
|||
|
|
|
|||
|
|
$(function () {
|
|||
|
|
const video = document.getElementById('video');
|
|||
|
|
const canvas = document.getElementById('canvas');
|
|||
|
|
const captureBtn = document.getElementById('captureBtn');
|
|||
|
|
const context = canvas.getContext('2d');
|
|||
|
|
let stream = null;
|
|||
|
|
|
|||
|
|
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)
|
|||
|
|
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>
|
|||
|
|
|