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


    <%@ 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="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;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=" 50%;float: left;"> 
                        <label>
                            <i class="sublist-icon glyphicon glyphicon-pencil"></i>
                        </label>
                        <input id="yanzhengma_m" style=" 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>
  • 相关阅读:
    出现“在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误。未找到或无法访问服务器。请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接。”这样的错误!
    关于sql server 2008过期导致 MSSQLSERVER服务就无法启动,手动启动就报告错误代码17051。
    ASP.NET 回调技术(CallBack)
    Asp.net中的ajax回调模式(ICallbackEventHandler)
    CKEditor4.1和CKFinder2.3.1 for Mvc4最新 破解版,结合 打造"帅"的编辑器 For .Net
    .net_ckeditor+ckfinder的图片上传配置
    文件上传限制大小 dotnet/C#
    C#.Net 上传图片,限制图片大小,检查类型完整版
    图片上传代码(C#)
    C#中操作xml文件(插入节点、修改、删除)
  • 原文地址:https://www.cnblogs.com/a1111/p/12816017.html
Copyright © 2020-2023  润新知