【阿里云高校计划】身份证识别系统搭建 day2 【抛砖引玉】

本文链接：https://blog.youkuaiyun.com/weixin_42234067/article/details/106576054

身份证识别系统搭建

【阿里云高校计划】身份证识别系统搭建 day2 【抛砖引玉】

【阿里云高校计划】身份证识别系统搭建 day2 【抛砖引玉】

身份证识别系统搭建

最终成果展示

用户在上传身份证人像面和国徽面之后，点击开始识别，就可以得到身份证正反面的文字内容

在这里插入图片描述

一、项目简介

下图是该项目的文件结构，是一个spring boot项目

OCR:光学字符识别（Optical Character Recognition）
Maven 一个核心的特性就是依赖管理。
Maven 通过读取项目文件（pom.xml），找出它们项目之间的依赖关系。

Application:Spring-Boot的一个启动类
MainController:控制器层，负责模板的渲染、路由等功能
OcrService:负责通过SDK调用视觉智能开放平台的OCR能力
index.html:基于thymeleaf的前端模板
application.properties:包含若干配置项的配置文件
pom.xml:pom依赖

二、获取视觉智能开放平台提供的SDK

进入视觉智能开放平台的官网

找到帮助文档

在这里插入图片描述

进入视觉智能开放平台目录
在这里插入图片描述

查看Java的SDK文档

https://help.aliyun.com/document_detail/151899.html

在这里插入图片描述

点击 Java（支持本地上传）进入相应的说明页，我们可以看出其中有很多 SDK，
我们需要找到需要的 OCR SDK。如下图所示，我们可以通过下面的链接来找到我们所需要的相应版本的 SDK，然后获取我们需要的 Maven 坐标。

https://mvnrepository.com/artifact/com.aliyun/aliyun-java-sdk-ocr

在这里插入图片描述

之后通过在pom.xml文件中添加Maven依赖安装java SDK，于是成功获得到了视觉智能开放平台提供的SDK

之后在我们的pom.xml里加入，如图所示

在这里插入图片描述

三、项目实现

（一）前端index.html

前端的实现是基于 thymeleaf 做的一个模版，其页面如下图所示，包括一个标
题、2 个表单、2 个上传文件的组件以及一个开始识别的按钮。

在这里插入图片描述

在src/main/resources/templates目录中新建index.html首页

在这里插入图片描述

写入代码，在浏览器打开页面，如图

在这里插入图片描述

这里我们用到了 bootstrap 和jquery 来进行页面的美化，我们用代理的方式来实现美化，相当于我们点击“上传人像面”的组件时候，会把表达上传到 input 组件中，再把 input 中的内容传给 form表单，“上传国徽面”也是如此。在 input 组件中，我们限制了可以上传图片的类型，最前面还设置了一个 alert，在用户上传的图片出现问题的时候会进行提示或者报错。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>VIAPI</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12 mx-auto">
            <h2>VIAPI RecognizeIdentityCard Example</h2>
            <div class="col-sm-12">
                <p th:text="${message}" th:if="${message ne null}" class="alert alert-primary"></p>
            </div>
            <form method="post" th:action="@{/upload}" enctype="multipart/form-data">
                <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