人脸识别活体检测之张张嘴和眨眨眼——login.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<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>

你可能感兴趣的:(人工智能,人工智能开发)