【阿里云高校计划】年轻人的第一个Demo--身份证识别系统搭建 day2

本文链接：https://blog.csdn.net/weixin_45839816/article/details/106576727

本文介绍了如何利用阿里云视觉智能开放平台搭建身份证识别系统。从项目简介、SDK获取到前后端实现，详细阐述了识别系统的构建过程，并分享了个人学习体验。

摘要由CSDN通过智能技术生成

【阿里云高校计划】年轻人的第一个Demo--身份证识别系统搭建

一、项目简介
二、获取视觉智能开放平台提供的 SDK
三、项目实现
四、总结

一、项目简介

我们先看一下最终的效果，如下图所示，该系统是一个简单的
身份证识别系统。用户上传身份证人像面和国徽面之后，点击开始识别，就可以得到身份证正反面的内容了。
在这里插入图片描述
项目中主要文件的介绍如下：
● Application：Spring-Boot 的一个启动类；
● MainController：控制器层，负责模版的渲染、路由等功能；
● OcrService：负责通过 SDK 调用视觉智能开放平台的 OCR 能力；
● index.html：基于 thymeleaf 的前端模版；
● application.properties：包含若干配置项的配置文件；
● pom.xml：pom 依赖。

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

进入到视觉智能开放平台的官网 https://vision.aliyun.com/
在这里插入图片描述
目前平台已经开放了包括人脸识别、文字识别、商品理解等在内的多项视觉 AI 能力。

点击身份证识别

在这里插入图片描述阿里云视觉智能开放平台提供的Java SDK，在传入参数时您不仅可以使用图片的URL，还可以使用本地文件，我们需要找到需要的 OCR SDK。

我们可以看到SDK也更新了好几个版本
在这里插入图片描述

找到我们所需要的相应版本的 SDK 在这里插入图片描述
导入依赖

<!-- https://mvnrepository.com/artifact/com.aliyun/ocr -->
<dependency>
    <groupId>com.aliyun</groupId>
    <artifactId>ocr</artifactId>
    <version>1.0.3</version>
</dependency>

三、项目实现

（一）前端

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>身份证识别系统</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> 身份证识别系统 </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: 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>
                    <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">开始识别<