<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>登陆</title>
<link href="css/bootstrap.min.css" title="" rel="stylesheet" />
<link title="orange" href="css/login2.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/xgxt_login.css" />
<link rel="stylesheet" href="css/style2.css">
<style type="text/css">
.con {
height: 100%;
margin-top: 0px;
}
#content {
height: 100%;
}
#canvas {
display: none;
}
.login {
top: -20%;
}
.margin_big{
margin-top: 100px;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/index_face.js"></script>
<script type="text/javascript">
//进行验证
function CatchCode() {
//实际运用可不写，测试代 ， 为单击拍照按钮就获取了当前图像，有其他用途
var canvans = document.getElementById("canvas");
var video = document.getElementById("video");
var context = canvas.getContext("2d");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0);
var imgData = canvans.toDataURL();
//获取图像在前端截取22位以后的字符串作为图像数据
var imgData1 = imgData.substring(22);
var data = {
'img' : imgData1
};
var dataInfo = $.parseJSON(data);
$.ajax({
type : "post",
url : "faceServlet",
data : {
"img" : imgData1,
"tag" : "mouse"
},
dataType : "json",
success : function(data) {
if (data == '1') {
console.log('张张嘴验证成功');
//清除定时器
window.clearInterval(interval);
voice_eye();
setTimeout("eye_yanzheng()",2000); //延迟2秒后执行
} else {
console.log('张张嘴验证失败');
}
},
error : function(msg) {
alert("请把脸放好了");
}
});
}
//验证眨眨眼
function eye_yanzheng() {
//实际运用可不写，测试代 ， 为单击拍照按钮就获取了当前图像，有其他用途
var canvans = document.getElementById("canvas");
var video = document.getElementById("video");
var context = canvas.getContext("2d");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0);
var imgData = canvans.toDataURL();
//获取图像在前端截取22位以后的字符串作为图像数据
var imgData1 = imgData.substring(22);
var data = {
'img' : imgData1
};
var dataInfo = $.parseJSON(data);
$.ajax({
type : "post",
url : "faceServlet",
data : {
"img" : imgData1,
"tag" : "eye"
},
dataType : "json",
success : function(data) {
if (data == '1') {
console.log('眨眨眼验证成功');
location.href = "http://muxiongxiong.top";
} else {
console.log('眨眨眼验证失败');
dingshiqi_eye();
}
},
error : function(msg) {
}
});
}
//眨眨眼的定时器
function dingshiqi_eye() {
//执行定时器
var time = 500;
//执行人脸判断
interval = setInterval(eye_yanzheng(), time);
}
</script>
<script type="text/javascript" src="js/phone_pass.js"></script>
<script type="text/javascript">
$(function(){
/* 密码登陆 */
$("#pass_click_login").click(function(){
//进行非空验证
var uname = $("#uname").val(); //用户名
var password = $("#password_login").val(); //密码
var upho =$("#upho").val(); //手机号
var x = $("#x_r").val(); //验证码
var yanzhengma_m = $("#yanzhengma_m").val();//验证码（填入）
if(uname ==''||uname==null){
alert('用户名不能为空');
}else if(password ==''||password==null){
alert('密码不能为空');
}else if(upho ==''||upho==null){
alert('手机号不能为空');
}else if(yanzhengma_m ==''||yanzhengma_m==null){
alert('验证码不能为空');
}else if(x !==yanzhengma_m){
alert('验证码不正确');
}else{
$.ajax({
type: "post",
url: "facelogin.action",
data: {
"password": password,"uname":uname,"tag":"pass"
},
dataType: "json",
success: function(data) {
var dataInfo = $.parseJSON(data);
if(data.resu == '1'){
alert(data.msg);
location.href="many.jsp";
}else{
alert(data.msg);
}
},
error: function(msg){
alert("出现未知错误");
location.href="errorPage.jsp";
}
});
}
});
/*获取验证码*/
$("#huoqu").click(function(){
/*发送验证码 */
var x = $("#x_r").val();
var phone = $("#upho").val();
var uname =$("#uname").val();
$.ajax({
url:"getPhoneV.action",
type:"post",
data:{"phone":phone,"uname":uname,"x":x},
success:function(data){
}
});
});
});
</script>
</head>
<body style="overflow: hidden;">
<div style="height:1px;"></div>
<div class="login">
<header>
<h1>登陆</h1>
</header>
<div class="sr">
<div class="con_input" style="margin-top:-100px;padding:0px;margin-left: 100px;">
<!-- 扫描 -->
<div class="radar" style="width:100px;height:100px;top:145px;left:45px;border:0px;"></div>
<div id="support"></div>
<div id="contentHolder">
<video id="video" width="90" height="90" style="border:1px solid red;border-radius: 800px;" autoplay></video>
<canvas style="border:1px solid red;border-radius: 800px;width:90px;height:90px;" id="canvas"></canvas>
</div>
</div>
<div class="name" id="username">
<label>
<i class="sublist-icon glyphicon glyphicon-user"></i>
</label>
<input type="text" placeholder="这里输入登录名" class="name_inp" id="uname">
<input type="hidden" value="<%=new Random().nextInt(1000000)%>" id="x_r"/>
</div>
<div class="name" id="pass">
<label>
<i class="sublist-icon glyphicon glyphicon-pencil"></i>
</label>
<input type="text" placeholder="这里输入登录密码" class="name_inp" id="password_login">
</div>
<div class="name" id="phone">
<label>
<i class="sublist-icon glyphicon glyphicon-pencil"></i>
</label>
<input type="text" placeholder="这里输入手机号" class="name_inp" id="upho">
</div>
<!--验证码-->
<div class="name" id="yzm" style="width: 50%;float: left;">
<label>
<i class="sublist-icon glyphicon glyphicon-pencil"></i>
</label>
<input id="yanzhengma_m" style="width: 100%;float: left;" type="text" placeholder="输入验证码" class="name_inp">
</div>
<span class="msgs" style="float: left;" id="huoqu">获取短信验证码</span>
<input type="button" id="snap" value="检测" class="dl" /> <br/>
<input type="button" id="pass_click_login" value="检测" class="dl" /> <br/>
<span style="margin-left: 100px;"><a href="#" id="pass_click">密码登陆？</a></span>
<span style="margin-left: 0px;"><a href="#" id="face_click">人脸登陆？</a></span>
</div>
</div>
</body>
</html>人脸识别活体检测之张张嘴和眨眨眼——login.jsp
猜你喜欢
转载自blog.csdn.net/qq_34137397/article/details/80779988
今日推荐
周排行