`
huangyongxing310
  • 浏览: 495781 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

百度人脸识别

 
阅读更多
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>







分享到:
评论

相关推荐

    Android studio百度人脸识别SDK

    **Android Studio 百度人脸识别SDK** 在Android应用开发中,集成百度人脸识别SDK可以让开发者实现诸如人脸检测、识别、对比等功能,提升用户体验并增加应用的安全性。Android Studio是Google推出的一款强大的...

    百度人脸识别windows java离线sdk

    在本文中,我们将深入探讨“百度人脸识别Windows Java离线SDK”的相关知识点,这是一款专为Windows平台设计的、基于Java的计算机视觉库,主要用于实现高效、精准的人脸识别功能。在人工智能领域,尤其是在计算机视觉...

    百度人脸识别nodejs-sdk

    **百度人脸识别Node.js SDK** 在IT领域,尤其是人工智能(AI)和计算机视觉的应用中,人脸识别技术扮演着重要的角色。百度作为中国领先的科技公司,提供了一系列的AI服务,其中包括人脸识别服务。这个“百度人脸...

    基于百度人脸识别API的人脸识别信息收集微信小程序

    基于百度人脸识别API的人脸识别信息收集小程序,使用 PolarDB 云数据库、云服务器搭建开发;该小程序通过特别的人脸标识码来标记人脸,微信调用gps记录地理位置信息,并记录用户相关信息。 已有体验版小程序已通过...

    SSM调用百度人脸识别demo

    在"SSM调用百度人脸识别demo"这个项目中,我们将看到如何将SSM与百度的人脸识别API集成,实现图像处理和人脸识别功能。 首先,我们需要了解SSM框架的基础知识。Spring框架提供依赖注入(DI)和面向切面编程(AOP),...

    delphi百度人脸识别离线SDK demo

    本demo调用百度人脸识别离线SDK, 实现的基本功能: 1)检测图片中是否有人脸; 2)从图片中取特征值; 3)两个特征值对比(1:1), 可在此基础上做1:N(测试单线程2W的人脸库500ms出结果); 这里只是调用SDK的代码,没有SDK包...

    百度人脸识别c++-sdk

    本文将详细介绍“百度人脸识别C++-SDK”,它是一个专为C++开发者设计的工具包,用于集成百度人工智能(AI)的人脸识别技术。该SDK允许开发者在C++项目中轻松地接入百度的人脸检测、人脸识别和比对等功能。 ### 1. ...

    百度人脸识别API

    【百度人脸识别API】是百度公司提供的一个人工智能服务,它基于深度学习技术,实现了高精度的人脸检测、特征提取、人脸识别等功能。这个API允许开发者在自己的应用中集成人脸识别能力,例如用于用户身份验证、人脸...

    java百度人脸识别

    在Java中实现百度人脸识别是一项涉及图像处理和人工智能的技术任务。本文将深入探讨如何利用百度的人脸识别API在Java环境中进行开发。首先,我们需要了解百度人脸识别服务的基础知识,它包括人脸检测、人脸比对、...

    (C#)百度人脸识别离线SDK

    在本文中,我们将深入探讨如何使用C#语言调用百度人脸识别离线SDK,这是一个强大的工具,可以帮助开发者在本地环境中实现高效、准确的人脸识别功能。百度人脸识别离线SDK提供了多种功能,包括人脸检测、人脸比对、...

    百度人脸识别demo

    **百度人脸识别Demo详解** 本文将深入探讨如何使用百度离线人脸识别SDK来构建一个人脸检测、对比及识别的示例应用。这个"百度人脸识别Demo"基于百度AI平台的技术,旨在为开发者提供一个快速入门的起点,让你能够...

    百度人脸识别实例

    【百度人脸识别实例】是利用百度在线人脸识别API在Android Studio环境下构建的一个实际应用示例。这个DEMO展示了如何在安卓平台上集成并使用百度的人脸识别技术,涵盖了从申请API密钥到实现功能模块的全过程。 首先...

    百度人脸识别REST_API帮助文档

    标题:“百度人脸识别REST_API帮助文档”描述:“百度人脸识别REST_API帮助文档,帮助你开发各种有意思的APP”标签:“人脸识别” 知识点: 1. 人脸识别技术概述:百度媒体云人脸识别服务依托百度世界领先的人脸...

    PHP百度人脸识别Face(Demo)、SDK,,人脸比对,搜索,注册,删除,更新,带说明书

    首先,"百度人脸识别"是百度提供的一项AI服务,它基于深度学习技术,能够实现人脸检测、特征提取、人脸比对、人脸搜索等功能。这项服务广泛应用于身份验证、社交娱乐、智能安防等领域。 1. **人脸检测**:这是人脸...

    基于百度人脸识别封装的reactnative模块支持AndroidiOS平台设备

    结合百度人脸识别技术,我们可以创建一个功能强大的混合移动应用。下面将详细探讨基于百度人脸识别封装的React Native模块在Android和iOS平台的应用。 首先,React Native(RN)是JavaScript框架,它使用“Learn ...

    基于百度人脸识别SDK实现人脸照片对比demo

    在本文中,我们将深入探讨如何使用百度人脸识别SDK来实现人脸照片对比的demo。人脸照片对比技术是计算机视觉领域的一个重要应用,它广泛应用于安全验证、社交媒体、身份识别等多个场景。百度作为中国领先的人工智能...

    百度人脸识别安卓版

    【百度人脸识别安卓版】是一款基于安卓平台的人脸识别技术应用,由互联网巨头百度公司开发。该软件在2019年1月前是完整的版本,之后可能需要对文件授权进行更新以保持其功能正常运行。在这款软件中,开发者集成了一...

    百度人脸识别api接口demo

    【百度人脸识别API接口Demo详解】 本文将详细介绍如何使用百度人脸识别API接口,并通过提供的Delphi示例代码进行实际操作。百度人脸识别API是百度AI开放平台的一部分,它提供了强大的面部识别技术,包括人脸检测、...

    百度人脸识别Demo

    百度人脸识别Demo是百度AI开放平台提供的一款示例程序,用于展示其人脸识别API的功能和用法。开发者可以利用这个Demo快速了解如何在实际项目中集成百度的人脸识别服务。 1. **项目环境** - 本Demo适用于Visual ...

    springmvc 百度人脸识别登录

    1.该项目是利用百度人脸识别接口模拟人脸识别登录 2.项目框架采用maven,springMVC 权限控制 3.后台解析接口返回参数 配置顺序 1 .先去百度人脸识别网站申请自己的项目获取key 2 . 配置AuthService下 clientId和 ...

Global site tag (gtag.js) - Google Analytics