`
huangyongxing310
  • 浏览: 498558 次
  • 性别: 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>







分享到:
评论

相关推荐

    百度人脸识别windows java离线sdk

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

    Android studio百度人脸识别SDK

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

    百度人脸识别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允许开发者在自己的应用中集成人脸识别能力,例如用于用户身份验证、人脸...

    (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和 ...

    百度人脸识别API调用(图片抠图然后保存到人脸库以及通过照片在人脸库搜索匹配的人脸信息)

    在本文中,我们将深入探讨如何使用百度人脸识别API进行图片处理,包括人脸抠图、人脸库管理和人脸比对。首先,我们需要了解人脸识别技术的基本原理。人脸识别是计算机视觉领域的一个重要分支,它利用生物特征信息来...

Global site tag (gtag.js) - Google Analytics