百度人脸识别

package com.gaojinsoft.htwy.y2020.apiFace.service.impl;

import java.io.ByteArrayInputStream;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import javax.annotation.Resource;

import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.baidu.aip.face.AipFace;
import com.baidu.aip.face.MatchRequest;
import com.gaojinsoft.htwy.y2016.base.upload.service.AttachInfoService;
import com.gaojinsoft.htwy.y2019.marketManage.util.StringUtils;
import com.gaojinsoft.htwy.y2020.ApplyTypeCode.service.ApplyTypeCodeService;
import com.gaojinsoft.htwy.y2020.Kh.service.KhService;
import com.gaojinsoft.htwy.y2020.Store.service.StoreService;
import com.gaojinsoft.htwy.y2020.SupermarketSystem.service.SupermarketSystemService;
import com.gaojinsoft.htwy.y2020.apiFace.action.AipFaceAction;
import com.gaojinsoft.htwy.y2020.apiFace.service.AipFaceServ;
import com.gaojinsoft.htwy.y2020.matMake.util.ExceptionUtils;
import com.gaojinsoft.htwy.y2020.matMake.util.ListUtils;
import com.gaojinsoft.htwy.y2020.matMake.util.ResultUtils;
import com.gaojinsoft.htwy.y2020.utils.LogUtils;
import com.kingzheng.common.Json;
import com.kingzheng.common.autosql.scan.BaseScanSqlCommand;
import com.kingzheng.htwy.manage.service.ManageServ;

@Service("AipFaceServImpl")
public class AipFaceServImpl implements AipFaceServ {
	private ManageServ manageServ;

	@Autowired
	private KhService khService;

	@Autowired
	private StoreService storeService;

	@Autowired
	private ApplyTypeCodeService ApplyTypeCodeService;

	@Autowired
	private SupermarketSystemService supermarketSystemService;

	@Autowired
	private AttachInfoService attachInfoService;

	@Resource(name = "htwy_ManageServ")
	public void setManageServ(ManageServ serv) {
		this.manageServ = serv;
	}

	public static final String APP_ID = "23995676";
	public static final String API_KEY = "KgvAsdilAySvGOFsEazU0Pp6";
	public static final String SECRET_KEY = "iCz5vfj7LmeeVm58KUU71MOK4Ips7Qis";

	public AipFace getAipFace() throws Exception {

		AipFace client = new AipFace(APP_ID, API_KEY, SECRET_KEY);

//			/可选：设置网络连接参数
		client.setConnectionTimeoutInMillis(5000);
		client.setSocketTimeoutInMillis(60000);
		return client;

	}

	/**
	 * 人脸对比
	 * 
	 * @return
	 */
	@Override
	public void faceMatch(AipFaceAction action) throws Exception {

		try {
			
			Map<String, Object> result = new HashMap<String, Object>();
			
			String faceId = StringUtils.toNotNullString(action.getFaceId());
			String imgData = StringUtils.toNotNullString(action.getImgData());

			if ("".equals(faceId)) {
				ExceptionUtils.throwRuntimeException("对比人脸ID为空 ");
			}

			if ("".equals(imgData)) {
				ExceptionUtils.throwRuntimeException("上传图片信息为空 ");
			}

			// image1/image2也可以为url或facetoken, 相应的imageType参数需要与之对应。
			MatchRequest req1 = new MatchRequest(faceId, "FACE_TOKEN");
			MatchRequest req2 = new MatchRequest(imgData, "BASE64");
			ArrayList<MatchRequest> requests = new ArrayList<MatchRequest>();
			requests.add(req1);
			requests.add(req2);

			AipFace client = getAipFace();

			JSONObject res = client.match(requests);
			LogUtils.mainInfo("res", res.toString(2));
			
			int code = res.getInt("error_code");// 状态码： 200(请求成功)；400(请求失败)
			String errorMsg = res.getString("error_msg");// 状态码： 200(请求成功)；400(请求失败)
			if(code!=0) {
				ExceptionUtils.throwRuntimeException(errorMsg);
			}
			
			JSONObject res2 = (JSONObject) res.get("result");
			double score = res2.getDouble("score");// 
			
			if(score<70.0) {
				ExceptionUtils.throwRuntimeException("人脸相似度小于70%,请重新拍照进行校验");
			}
			
			result.put("score", score);

			action.setAjaxOutData(new ByteArrayInputStream(Json.Encode(ResultUtils.getSuccessResult(result)).toString().getBytes("utf-8")));

		} catch (Exception e) {
			e.printStackTrace();
			action.setAjaxOutData(new ByteArrayInputStream(Json.Encode(ResultUtils.getErrorResult(e)).toString().getBytes("utf-8")));
		}
	}

	@Override
	public void faceAdd(AipFaceAction action) throws Exception {

		try {
			Map<String, Object> result = new HashMap<String, Object>();
			
			String cardNum = StringUtils.toNotNullString(action.getCardNum());
			String imgData = StringUtils.toNotNullString(action.getImgData());

			if ("".equals(cardNum)) {
				ExceptionUtils.throwRuntimeException("身份证号为空 ");
			}

			if ("".equals(imgData)) {
				ExceptionUtils.throwRuntimeException("上传图片信息为空 ");
			}

			AipFace client = getAipFace();

			// 传入可选参数调用接口
			HashMap<String, String> options = new HashMap<String, String>();
			options.put("user_info", "");
			options.put("quality_control", "NORMAL");
			options.put("liveness_control", "NORMAL");
			options.put("action_type", "REPLACE");

			String image = imgData;
			String imageType = "BASE64";
			String groupId = "xkmm_face";
			String userId = cardNum;

			// 人脸注册
			JSONObject res = client.addUser(image, imageType, groupId, userId, options);
			LogUtils.mainInfo("res", res.toString(2));
			
			int code = res.getInt("error_code");// 状态码： 200(请求成功)；400(请求失败)
			String errorMsg = res.getString("error_msg");// 状态码： 200(请求成功)；400(请求失败)
			if(code!=0) {
				ExceptionUtils.throwRuntimeException(errorMsg);
			}
			
			
			JSONObject res2 = (JSONObject) res.get("result");
			
			String faceToken = res2.getString("face_token");// 状态码： 200(请求成功)；400(请求失败)
			
			result.put("faceId", faceToken);

			action.setAjaxOutData(new ByteArrayInputStream(Json.Encode(ResultUtils.getSuccessResult(result)).toString().getBytes("utf-8")));

		} catch (Exception e) {
			e.printStackTrace();
			action.setAjaxOutData(new ByteArrayInputStream(Json.Encode(ResultUtils.getErrorResult(e)).toString().getBytes("utf-8")));
		}
	}

	@Override
	public void updateFaceIdToSales(AipFaceAction action) throws Exception {

		try {
			String cardNum = StringUtils.toNotNullString(action.getCardNum());
			String faceId = StringUtils.toNotNullString(action.getFaceId());

			if ("".equals(cardNum)) {
				ExceptionUtils.throwRuntimeException("身份证号为空 ");
			}

			if ("".equals(faceId)) {
				ExceptionUtils.throwRuntimeException("对比人脸ID为空 ");
			}

			String sql = new BaseScanSqlCommand().getSqlText(this, "AipFaceServImpl.xml", "updateFaceIdToSales");

			sql = sql.replaceAll("##personId##", cardNum);
			sql = sql.replaceAll("##faceId##", faceId);

			manageServ.getCommonServ44().executeBySQL(sql);
			
			

			action.setAjaxOutData(new ByteArrayInputStream(Json.Encode(ResultUtils.getSuccessResult("")).toString().getBytes("utf-8")));

		} catch (Exception e) {
			e.printStackTrace();
			action.setAjaxOutData(new ByteArrayInputStream(Json.Encode(ResultUtils.getErrorResult(e)).toString().getBytes("utf-8")));
		}
	}

}

<!DOCTYPE HTML>
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>人脸校验</title>
    <style>
        * {
            margin: 0;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding: 0;
            padding-top: 0;
            padding-bottom: 0;
            padding-left: 0;
            padding-right: 0;
        }
        
        .pp {
            margin: 5px 0 5px;
        }
        
        .iconsize {
            font-size: 16px;
        }
        
        .mt5 {
            margin-top: 5px;
            margin-left: 5px;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .y2lable {
            width: 50%;
            text-align: left;
            height: 34px;
            line-height: 34px;
        }
        
        .pdl5 {
            padding-left: 5px;
            height: 34px;
            line-height: 34px;
            width: 62%;
        }
        
        .form-control {
            padding: 0px 12px;
            border: none;
            outline: none;
            box-shadow: none;
        }
        
        .btn {
            border-radius: 0;
            height: 40px;
            font-size: 18px;
        }
        
        .btn-primary {
            background-color: #689BC6;
        }
        
        #dlg_form {
            padding-bottom: 55px;
        }
        
        button {
            background-color: #fff;
            border: 1px solid #d4d0c8;
        }
        
        .mt5 {
            margin-top: 5px;
            margin-left: 8px;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .ystitle {
            font-size: 16px;
            height: 40px;
            line-height: 40px;
            color: #000000;
            border-bottom: 0px solid #dedede;
            padding-left: 5px;
            font-weight: bold;
        }
        
        .panel-default {
            border-color: #ddd;
            border-bottom: 0px white;
            box-shadow: unset;
            border-top-color: #ec7138;
            background-color: #fff;
            border-radius: 0px;
        }
        
        .imgbox {
            width: 72px;
            height: 100px;
            position: relative;
            display: inline-block;
            margin: 0 14px 5px 0px;
        }
        
        .imgbox img {
            z-index: 1;
            border: 0px solid #000;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .imgbox .reimgbtn {
            z-index: 2;
            display: inline-block;
            position: absolute;
            top: -12px;
            right: -12px;
            background: red;
            width: 24px;
            height: 24px;
            text-align: center;
            font-size: 24px;
            line-height: 24px;
            border-radius: 50%;
            color: #fff;
        }
        
        .file {
            position: relative;
            display: inline-block;
            background: #fff;
            border: 1px dashed #fff;
            border-radius: 4px;
            overflow: hidden;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        
        .file input {
            position: absolute;
            font-size: 45px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        
        .clear {
            clear: both
        }
    </style>
    <link href="../../../gaojinsoft/y2017/me/css/bootstrap.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="../../../gaojinsoft/y2017/me/css/iconfont/iconfont.css" rel="stylesheet"
          type="text/css">
    <script src="../../../gaojinsoft/y2017/me/js/jquery-1.11.1.min.js"
            type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2017/me/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2017/me/js/iconfont.js" type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2017/me/js/mobileBUGFix.mini.js"
            type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2017/me/js/upload.js" type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2017/me/js/exif.js" type="text/javascript"></script>
    <!-- 引入有度js文件 -->
    <!--	<script src="<%=request.getContextPath()%>/htwyRes/js/youdu_js_sdk/youdu_sdk.js" type="text/javascript"></script>-->
    
    <!-- 引入第三方toast弹窗组件 -->
    <script src="../../../gaojinsoft/y2017/me/js/layer/mobile/layer.js"
            type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2017/me/js/layerCommonJs.js" type="text/javascript"
            charset="utf-8"></script>
    <!-- 图片浏览器 -->
    <!--    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/htwyRes/js/simplelightbox/simplelightbox.min.css"/>-->
    <!--    <script type="text/javascript" charset="utf-8" src="<%=request.getContextPath()%>/htwyRes/js/simplelightbox/simple-lightbox.min.js"></script>-->
    <script src="../../../gaojinsoft/y2017/me/js/commonJs.js" type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2017/me/js/jqCommonJs.js" type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2020/supermarket/commonJs/vueCommonJs.js" type="text/javascript"></script>
    
    
    <link rel="stylesheet" type="text/css" href="app.css"/>
</head>

<body>


<div style="padding-bottom: 0rem;background-color: white;">
    <div style="text-align: center;background-color: #f4b149;font-size: 20px;color: white">
        人脸校验
    </div>
    
    <div class="take-face-photo" style="display: block;width: 100%;height: 400px;">
        
        <div style="padding: 3px 5px;height: 220px;">
            <div style="width: 100%;height: 100%;overflow: hidden;border-radius: 0.3rem;position: relative;">
                <div class="face-image-background" id="takeFaceBackgroup"
                     style="background: url(./images/order/face-image-icon-noadd.png) no-repeat;height: 100%;width: 100%;background-size: 100% 100%;position: relative;">
                    <img src="" id="take-face-photo-show"
                         style="width: auto;height: auto;max-width: 100%;max-height: 100%;border-radius: 0.3rem;border: 0.1rem dashed #ccc;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
                    <!--                    <img id="take-face-photo-show-temp"  src="">-->
                    <input type="text" value="" style="visibility: hidden" name="faceImg" id="faceImg">
                </div>
            </div>
        </div>
        
        <div class="face-request" style="height: 5%;margin-left: 5px;margin-right: 5px;text-align: center">
            <div style="width: 60px;display: inline-block;border-top: 0.05rem solid #f2ebeb;"></div>
            <div style="display: inline-block;width: 32.5%;text-align: center;font-size: 0.45rem;color: #b7b4b4;">温馨提示
            </div>
            <div style="width: 60px;display: inline-block;border-top: 0.05rem solid #f2ebeb;"></div>
        </div>
        
        <div class="face-request-img"
             style="padding: 5px 15px; display: flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;">
            <div style=" width: 30%;">
                <div style="background: url(./images/order/face-req-1.png)  center center  no-repeat; height: 50px;margin: 5px;background-size: contain;">
                
                </div>
                <div style="text-align: center;font-size: 0.4rem;color: black;">
                    摘掉眼镜
                </div>
            </div>
            <div style=" width: 30%;">
                <div style="background: url(./images/order/face-req-2.png)  center center  no-repeat ;height: 50px;margin:  5px;background-size: contain;">
                
                </div>
                <div style="text-align: center;font-size: 0.4rem;color: black;">
                    光线充足
                </div>
            </div>
            <div style=" width: 30%;">
                <div style="background: url(./images/order/face-req-3.png) center center  no-repeat;height: 50px;margin:  5px;background-size: contain;">
                
                </div>
                <div style="text-align: center;font-size: 0.4rem;color: black;">
                    不要戴帽子
                </div>
            </div>
        
        
        </div>
        
        <div class="face-request-img"
             style="padding: 5px 15px; display: flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;">
            <div class="sfz-request-tips" style="height: 45%;width: 100%;">
                <div style="display: inline-block;text-align: left;font-size: 0.4rem;color: black;padding: 2%;">
                    1、请将人脸正对手机，置于屏幕中央，并保持光线充足；
                </div>
                <div style="display: inline-block;text-align: left;font-size: 0.4rem;color: black;padding: 2%;">
                    2、保持网络良好，按系统提示操作；
                </div>
            </div>
        </div>
        
        
        <div class="">
            <div Style="float:left;width: 49%">
                <label class="btn btn-primary btn-xl btn-block" style="padding-top: 8px">
                    拍照
                    <input id="take-face-photo-input" img-attr="1" accept="image/*" type="file" style="display: none;"
                           onchange="showImageFileChageFun(this)">
                </label>
            </div>
            <div Style="float:right;width: 49%">
                <button type="button" class="btn btn-primary btn-xl btn-block" onclick="checkFaceFun()">上传校验</button>
            </div>
        </div>
    </div>
</div>

</body>


<script type="text/javascript">


	var faceId = commonJs.getUrlParam("faceId");
	var urlAttach = decodeURIComponent(commonJs.getUrlParam("url"));
	
	function checkFaceFun() {
		console.info("enterFaceFun");
		var imgData = getElementVal("#faceImg");
		imgData = commonJs.getFileDateString(imgData);
		
		var dataTemp={
			faceId:faceId,
			imgData:imgData
        };

		var url = vueCommonJs.getApplyPath() +  '/yami/AipFaceAction/faceMatch.do';

		ajaxPost(url, dataTemp, "确定校验", function (result) {

			console.info(result);
			if (result.flag) {
				// elementEnabled('#sendSmsCode',false);
				// openToast("校验成功", 2000);
				YmWindowLocation(urlAttach);
			} else {
				openAlert("校验失败，请重新校验!，失败原因" + result.msg);
			}
		},);

	}

	function showImageFileChageFun(th) {
		// var ds= $(th).parent();

		var filePath = $(th).val();//读取图片路径

		if (!filePath) {
			return;
		}
		if (filePath === "") {
			return;
		}

		//读取文件进行显示
		readImageFileAsDataURL(th.files[0], function (e) {
			console.info("e.target.result len = " + e.target.result.length);
			compressImageData(e.target.result, 0.7, function (data) {
				console.info("data len = " + data.length);
				setAttrValue("#take-face-photo-show", "src", data);
				setElementVal("#faceImg", data);
				$("#takeFaceBackgroup").css("background", "");
			});
		});

	}


</script>
</html>

<!DOCTYPE HTML>
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>人脸录入</title>
    <style>
        * {
            margin: 0;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding: 0;
            padding-top: 0;
            padding-bottom: 0;
            padding-left: 0;
            padding-right: 0;
        }
        
        .pp {
            margin: 5px 0 5px;
        }
        
        .iconsize {
            font-size: 16px;
        }
        
        .mt5 {
            margin-top: 5px;
            margin-left: 5px;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .y2lable {
            width: 50%;
            text-align: left;
            height: 34px;
            line-height: 34px;
        }
        
        .pdl5 {
            padding-left: 5px;
            height: 34px;
            line-height: 34px;
            width: 62%;
        }
        
        .form-control {
            padding: 0px 12px;
            border: none;
            outline: none;
            box-shadow: none;
        }
        
        .btn {
            border-radius: 0;
            height: 40px;
            font-size: 18px;
        }
        
        .btn-primary {
            background-color: #689BC6;
        }
        
        #dlg_form {
            padding-bottom: 55px;
        }
        
        button {
            background-color: #fff;
            border: 1px solid #d4d0c8;
        }
        
        .mt5 {
            margin-top: 5px;
            margin-left: 8px;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .ystitle {
            font-size: 16px;
            height: 40px;
            line-height: 40px;
            color: #000000;
            border-bottom: 0px solid #dedede;
            padding-left: 5px;
            font-weight: bold;
        }
        
        .panel-default {
            border-color: #ddd;
            border-bottom: 0px white;
            box-shadow: unset;
            border-top-color: #ec7138;
            background-color: #fff;
            border-radius: 0px;
        }
        
        .imgbox {
            width: 72px;
            height: 100px;
            position: relative;
            display: inline-block;
            margin: 0 14px 5px 0px;
        }
        
        .imgbox img {
            z-index: 1;
            border: 0px solid #000;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .imgbox .reimgbtn {
            z-index: 2;
            display: inline-block;
            position: absolute;
            top: -12px;
            right: -12px;
            background: red;
            width: 24px;
            height: 24px;
            text-align: center;
            font-size: 24px;
            line-height: 24px;
            border-radius: 50%;
            color: #fff;
        }
        
        .file {
            position: relative;
            display: inline-block;
            background: #fff;
            border: 1px dashed #fff;
            border-radius: 4px;
            overflow: hidden;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        
        .file input {
            position: absolute;
            font-size: 45px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        
        .clear {
            clear: both
        }
    </style>
    <link href="../../../gaojinsoft/y2017/me/css/bootstrap.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="../../../gaojinsoft/y2017/me/css/iconfont/iconfont.css" rel="stylesheet"
          type="text/css">
    <script src="../../../gaojinsoft/y2017/me/js/jquery-1.11.1.min.js"
            type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2017/me/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2017/me/js/iconfont.js" type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2017/me/js/mobileBUGFix.mini.js"
            type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2017/me/js/upload.js" type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2017/me/js/exif.js" type="text/javascript"></script>
    <!-- 引入有度js文件 -->
    <!--	<script src="<%=request.getContextPath()%>/htwyRes/js/youdu_js_sdk/youdu_sdk.js" type="text/javascript"></script>-->
    
    <!-- 引入第三方toast弹窗组件 -->
    <script src="../../../gaojinsoft/y2017/me/js/layer/mobile/layer.js"
            type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2017/me/js/layerCommonJs.js" type="text/javascript"
            charset="utf-8"></script>
    <!-- 图片浏览器 -->
    <!--    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/htwyRes/js/simplelightbox/simplelightbox.min.css"/>-->
    <!--    <script type="text/javascript" charset="utf-8" src="<%=request.getContextPath()%>/htwyRes/js/simplelightbox/simple-lightbox.min.js"></script>-->
    <script src="../../../gaojinsoft/y2017/me/js/commonJs.js" type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2017/me/js/jqCommonJs.js" type="text/javascript"></script>
    <script src="../../../gaojinsoft/y2020/supermarket/commonJs/vueCommonJs.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="app.css"/>
</head>

<body>


<div style="padding-bottom: 0rem;background-color: white;">
    <div style="text-align: center;background-color: #f4b149;font-size: 20px;color: white">
        人脸录入
    </div>
    
    <div class="take-face-photo" style="display: block;width: 100%;height: 400px;">
        
        <div style="padding: 3px 5px;height: 220px;">
            <div style="width: 100%;height: 100%;overflow: hidden;border-radius: 0.3rem;position: relative;">
                <div class="face-image-background" id="takeFaceBackgroup"
                     style="background: url(./images/order/face-image-icon-noadd.png) no-repeat;height: 100%;width: 100%;background-size: 100% 100%;position: relative;">
                    <img src="" id="take-face-photo-show"
                         style="width: auto;height: auto;max-width: 100%;max-height: 100%;border-radius: 0.3rem;border: 0.1rem dashed #ccc;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
                    <!--                    <img id="take-face-photo-show-temp"  src="">-->
                    <input type="text" value="" style="visibility: hidden" name="faceImg" id="faceImg">
                </div>
            </div>
        </div>
        
        <div class="face-request" style="height: 5%;margin-left: 5px;margin-right: 5px;text-align: center">
            <div style="width: 60px;display: inline-block;border-top: 0.05rem solid #f2ebeb;"></div>
            <div style="display: inline-block;width: 32.5%;text-align: center;font-size: 0.45rem;color: #b7b4b4;">温馨提示
            </div>
            <div style="width: 60px;display: inline-block;border-top: 0.05rem solid #f2ebeb;"></div>
        </div>
        
        <div class="face-request-img"
             style="padding: 5px 15px; display: flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;">
            <div style=" width: 30%;">
                <div style="background: url(./images/order/face-req-1.png)  center center  no-repeat; height: 50px;margin: 5px;background-size: contain;">
                
                </div>
                <div style="text-align: center;font-size: 0.4rem;color: black;">
                    摘掉眼镜
                </div>
            </div>
            <div style=" width: 30%;">
                <div style="background: url(./images/order/face-req-2.png)  center center  no-repeat ;height: 50px;margin:  5px;background-size: contain;">
                
                </div>
                <div style="text-align: center;font-size: 0.4rem;color: black;">
                    光线充足
                </div>
            </div>
            <div style=" width: 30%;">
                <div style="background: url(./images/order/face-req-3.png) center center  no-repeat;height: 50px;margin:  5px;background-size: contain;">
                
                </div>
                <div style="text-align: center;font-size: 0.4rem;color: black;">
                    不要戴帽子
                </div>
            </div>
        
        
        </div>
        
        <div class="face-request-img"
             style="padding: 5px 15px; display: flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;">
            <div class="sfz-request-tips" style="height: 45%;width: 100%;">
                <div style="display: inline-block;text-align: left;font-size: 0.4rem;color: black;padding: 2%;">
                    1、请将人脸正对手机，置于屏幕中央，并保持光线充足；
                </div>
                <div style="display: inline-block;text-align: left;font-size: 0.4rem;color: black;padding: 2%;">
                    2、保持网络良好，按系统提示操作；
                </div>
            </div>
        </div>
        
        
        <div class="">
            <div Style="float:left;width: 49%">
                <label class="btn btn-primary btn-xl btn-block" style="padding-top: 8px">
                    拍照
                    <input id="take-face-photo-input" img-attr="1" accept="image/*" type="file" style="display: none;"
                           onchange="showImageFileChageFun(this)">
                </label>
            </div>
            <div Style="float:right;width: 49%">
                <button type="button" class="btn btn-primary btn-xl btn-block" onclick="enterFaceFun()">上传录入</button>
            </div>
        </div>
    </div>
</div>

</body>


<script type="text/javascript">


	var cardNum = commonJs.getUrlParam("cardNum");

	function enterFaceFun() {
		console.info("enterFaceFun");
		var imgData = getElementVal("#faceImg");
		imgData = commonJs.getFileDateString(imgData);

		var dataTemp = {
			cardNum: cardNum,
			imgData: imgData
		};

		var url = vueCommonJs.getApplyPath() + '/yami/AipFaceAction/faceAdd.do';

		ajaxPost(url, dataTemp, "确定录入", function (result) {

			console.info(result);
			if (result.flag) {
				// elementEnabled('#sendSmsCode',false);
				
				updateFaceIdToSales(cardNum,result.data.faceId);
			} else {
				openAlert("录入失败，请重新校验!，失败原因" + result.msg);
			}
		},);
	}

	function updateFaceIdToSales(cardNum, faceId) {
		console.info("updateFaceIdToSales");
		var imgData = getElementVal("#faceImg");
		imgData = commonJs.getFileDateString(imgData);

		var dataTemp = {
			cardNum: cardNum,
			faceId: faceId
		};

		var url = vueCommonJs.getApplyPath() + '/yami/AipFaceAction/updateFaceIdToSales.do';

		ajaxPost(url, dataTemp, "", function (result) {

			console.info(result);
			if (result.flag) {
				openAlert("录入成功" + result.msg,"",function () {
					var urlTemp = vueCommonJs.getApplyPath()+'/yami/SuperMarketApplyAction/applyList.do?type=1';
					YmWindowLocation(urlTemp);
				});
			} else {
				openAlert("更新用户人脸信息失败!，失败原因" + result.msg);
			}
		},);

	}

	function showImageFileChageFun(th) {
		// var ds= $(th).parent();

		var filePath = $(th).val();//读取图片路径

		if (!filePath) {
			return;
		}
		if (filePath === "") {
			return;
		}

		//读取文件进行显示
		readImageFileAsDataURL(th.files[0], function (e) {
			console.info("e.target.result len = " + e.target.result.length);
			compressImageData(e.target.result, 0.7, function (data) {
				console.info("data len = " + data.length);
				setAttrValue("#take-face-photo-show", "src", data);
				setElementVal("#faceImg", data);
				$("#takeFaceBackgroup").css("background", "");
			});
		});

	}


</script>
</html>