【阿里云高校计划】零基础学习视觉AI，Day2-身份证识别系统搭建(学习笔记)

身份证识别系统搭建（学习笔记）

文中原视频地址为 达摩院特别版-视觉AI训练营

参考官方开发文档 阿里云视觉智能开放平台

下载ODR的SDK包（本文使用1.0.3版本），传送门OCR

实现逻辑

前端

实现上传

<div class="col-sm-4">
                        <div class="input-group">
                            <input id='location' class="form-control" onclick="$('#i-face').click();">
                            <label class="input-group-btn">
                                <input type="button" id="i-check" value="上传人像面" class="btn btn-primary" onclick="$('#i-face').click();">
                            </label>
                        </div>
                    </div>
                    <input type="file" name="face" id='i-face'  accept=".jpg, .png, .jpeg" onchange="$('#location').val($('#i-face').val());" style="display: none">
                    <div class="col-sm-4">
                        <div class="input-group">
                            <input id='location1' class="form-control" onclick="$('#i-back').click();">
                            <label class="input-group-btn">
                                <input type="button" id="i-check-1" value="上传国徽面" class="btn btn-primary" onclick="$('#i-back').click();">
                            </label>
                        </div>
                    </div>

提示报错

<div class="col-sm-12">
                    <p th:text="${message}" th:if="${message ne null}" class="alert alert-primary"></p>
                </div>

限定图片上传类型

<input type="file" name="back" id='i-back'  accept=".jpg, .png, .jpeg" onchange="$('#location1').val($('#i-back').val());" style="display: none">

提交按钮

<div class="col-sm-4">
                        <button type="submit" class="btn btn-primary">开始识别</button>
                    </div>

输出上传的图片

<div class="col-md-12 mx-auto">
                <div class="col-sm-4">
                    <img style="width: 100%;" th:src="${faceImage}" th:if="${faceImage ne null}" class="img-fluid" alt=""/>
                </div>
                <div class="col-sm-4">
                    <img style="width: 100%;" th:src="${backImage}" th:if="${backImage ne null}" class="img-fluid" alt=""/>
                </div>
            </div>

输出result

<div class="row" style="margin-top: 30px;">
            <div class="col-md-12 mx-auto">
                <div class="col-sm-4">
                    <p th:if="${faceResult ne null}"><span>姓名：</span><span th:text="${faceResult.name}"></span></p>
                    <p th:if="${faceResult ne null}"><span>性别：</span><span th:text="${faceResult.gender}"></span></p>
                    <p th:if="${faceResult ne null}"><span>民族：</span><span th:text="${faceResult.nationality}"></span></p>
                    <p th:if="${faceResult ne null}"><span>出生日期：</span><span th:text="${faceResult.birthDate}"></span></p>
                    <p th:if="${faceResult ne null}"><span>住址：</span><span th:text="${faceResult.address}"></span></p>
                    <p th:if="${faceResult ne null}"><span>身份证号码：</span><span th:text="${faceResult.IDNumber}"></span></p>
                </div>
                <div class="col-sm-4">
                    <p th:if="${backResult ne null}"><span>签发机关：</span><span th:text="${backResult.issue}"></span></p>
                    <p th:if="${backResult ne null}"><span>有效日期：</span><span th:text="${backResult.startDate}"></span>~<span th:text="${backResult.endDate}"></span></p>
                </div>
            </div>
        </div>

后端

定义变量

    private String uploadDirectory;
    private OcrService ocrService;
    private List<String> faceImages;
    private List<String> backImages;
    private List<Map<String, String>> faceResults;
    private List<Map<String, String>> backResults;

图片异常时清除

if (faceImages.size() != backImages.size()) {
            faceImages.clear();
            backImages.clear();
            faceResults.clear();
            backResults.clear();
        }

判断目录是否存在

try {
            Path dir = Paths.get(uploadDirectory);
            if (!Files.exists(dir)) {
                Files.createDirectories(dir);

判断人像面图片

if (!face.isEmpty()) {
                String filename = saveFile(face);
                Map<String, String> res = ocrService.RecognizeIdCard(uploadDirectory + filename, "face");
                faceImages.add("/images/" + filename);
                faceResults.add(res);
            }

判断背面图片

 if (!back.isEmpty()) {
                String filename = saveFile(back);
                Map<String, String> res = ocrService.RecognizeIdCard(uploadDirectory + filename, "back");
                backImages.add("/images/" + filename);
                backResults.add(res);
            }

判断异常

} catch (TeaException e) {
            e.printStackTrace();
            errorMessage = JSON.toJSONString(e.getData());

OcrService逻辑

初始化标签

  @PostConstruct
    private void init() throws Exception {
        Config config = new Config();
        config.type = "access_key";
        config.regionId = "cn-shanghai";
        config.accessKeyId = accessKeyId;
        config.accessKeySecret = accessKeySecret;
        config.endpoint = "ocr.cn-shanghai.aliyuncs.com";

        ocrClient = new Client(config);
        runtime = new RuntimeOptions();
    }

调用身份证识别

 public Map<String, String> RecognizeIdCard(String filePath, String side) throws Exception {

        RecognizeIdentityCardAdvanceRequest request = new RecognizeIdentityCardAdvanceRequest();
        request.imageURLObject = Files.newInputStream(Paths.get(filePath));
        request.side = side;
        RecognizeIdentityCardResponse response = ocrClient.recognizeIdentityCardAdvance(request, runtime);

        if ("face".equals(side)) {
            return JSON.parseObject(JSON.toJSONString(response.data.frontResult), new TypeReference<Map<String, String>>() {});
        } else {
            return JSON.parseObject(JSON.toJSONString(response.data.backResult), new TypeReference<Map<String, String>>() {});
        }
    }
}

本文所有代码出自 GitHub

日常感谢阿里云高校计划能提供这样的学习平台，免费领阿里云CES传送门阿里云CES

二维码传送门

：