开发者学堂课程【视觉 AI 应用开发教程： 身份证识别系统销量（一）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/289/detail/3412
身份证识别系统销量（一）
内容介绍：
一、系统的界面呈现和功能呈现
二、此项目的核心逻辑和整体结构
一、系统的界面呈现和功能呈现
在百度上进入下面页面：
此时，系统会将刚刚上传的身份证信息和照片返回
二、此项目的核心逻辑和整体结构
1. 如何获取并利用智能开放视觉平台提供的 SDK
在浏览器输入网址：https://vision.aliyun.com进入下面的页面：
找到文字识别——身份证识别，进去之后，查看文档:
主要是为了查看 SDK 部分，提供了俩种 JAVA 的 SDK。
第一种是通用的，要求是调用AI算法时，需要调用 OSS 的 uil，需要先把图片上传到 OSS 里面，才能调用 SOK。新版 Java 的 SDK 支持本地文件上传，通过 SDK，可以直接通过本地文件来调用 AI 能力。
2. SDK 如何获取？
通过上图中的实例的链接，通过链接去找到地址所在 OCR：
目前使用版本是1.0.3，打开智能坐标后，进入：
description>DemoprojectforSpringBootandyiapi</description> properties>
<java.version>1.8</java.version
/properties>
(dependencies>
<dependency>
<groupId>org.springframework.boot</groupId:
cartifactId spring-boot-starter-webk/artifactId
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId
cartifactId>spring-boot-starter-thymeleafc/artifactId </dependency>
<dependency>
(groupId>org.springframework.boot</groupId
artifactId>spring-boot-starter-testc/artifactId)
<scope>testc/scope
exclusions)
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion I
exclusions
</dependency>
<dependency>
<groupId>org.apache.commons</groupId:
<artifactId>commons-lang3</artifactId
c/dependency
dependency?
<groupId>com.aliyun</groupId
cartifactId>ocrc/artifactId
cversion>1.0.3</version
c/dependency?
<dependency>
kgroupId>com.alibabac/groupId
kartifactId>fastison</artifactId
<version>1.2.67</version
</dependency?
/dependencies>
以上是获取智能开放平台的 SDK 的步骤
3. 项目的实现逻辑
首先查看基于 tiklik 做的模板：
进入后页面如下：
代码里面有一个标题，下面会有一个表单，有两个文件上传的按钮分别是两个并列的一个上传人像面，实现了一些美化的功能。
Ctitle>VIAPIS/title
<link lesheet" hrefethttos://cdnbootcs /bootstrap/3.3.7/cs bootstrap
script https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</script>
body
div class="col-md-12
Ch2>VIAPIRecognizeIdentityCard Example</h2>
cdivclass="col-sm-12"5
th:texte message th:if="s(message ne null]"class="alert alert-primary"></p >
(/div><formmethod="post"th:action="e(/upload)"enctype="multipart/form-data"
kdiv
<div classe"input-group"y
inutide'location'class="form-control"onclick="s('#i-face').click();"
label class="input-group-bton
input type="button"id="i-check" value="上传人像面”class="btn btn-primary" onclick="$('#i-face').click();" /label
c/div
</div>l
kinput type="file" names"face" id='i-face' accept=".jpg, ·png, .jpeg" onchange="$('#location').xal(克('#i-face').yal()
cdiv input-group">
4de010e +4081class="form-control" onclick="('#i-back').click();
clabel input-group-btn"
Cinput type="button"id="i-check-1"value="上传国徽面”class="btn btn-primary"onclick="S('#i-back').click()
c/Label
</div
k/div>
kinputtype="file" name="back" id='i-back! accept=".jpg, .png, .jpeg" onchange="$('#location1').ya(克('#i-back').yal()); st kdiv classa"col-sm-4"
<button type-"submit"class="btn btn-primary">开始识别</button>
s/div
k/form
style="margin-top:30px;"
Cdivclass
Div 里面展示了一个局部绘制一个文件上传的组件，通过代理 input file 类型的 input 框来实现这个美化的作用，会实际的去把文件上传到这个音库的组件，然后把一部的组件里面的内容，上传放置表单，最后提交下面的这个文件上传的按钮，同理，可以看到这个文件上传限定了若干图片上传类型 jpg，这个隐藏式的页面结构，他的 display 被设置为 no。
相当于原生的 input 框。通过 i-face 找到了原生组件。
div class="col-md-12 mx-auto")
RecognizeIdentityCard Example</h2>
kdivclas ol-sm-12">
th:tex nessage nenuttie Nss-"atert alert-primary
/div>
ethod posth th:action="@(/upload]"enctype-"multipart/form-data"
Cdiv
cdivclass=input-groupf>
input id='location!class="form-control" onclick="$('#i-face').click();"
cLabel
input type="button" id="i-check" value="上传人像面”class="btn btn-primary onclick="s(i-face').click()
label
C/div
</div>
type="file" name="face" id='i-face accept=".jpg, ·png, ·jpeg" onchange="$('flocation').xal(克('i-fac tvlea"dr cdiv
kdiv "input-group">class="form-control" onctick="('i-back').click();
id='location1!
labelclass="input-group-btn"
<input type="button"id="i-check-1"value="上传国徽面”class="btn btn-primary"onclick="s('i-back').click(); k/label
</div
cinputtype="file" name="back" id='i-back accept=".jpg, png, .jpeg" onchange="$('#location1')·xal(支('#i-back').xal());"style-"kdiv class
<buttontype="submitnclass="btn btn-primary">开始识别</button>
(/div)
s/forn
30px;
l-md-12
上图为一个 alert 的 message，相当于提示用户上传图片有误，提示用户。运用了一些语法，信息不为空时，才能展示，否则不展示。
div classa"row"style-' argin-top:30px;
col-md-12
kdivclass.fcol-sm
Kimg style th:srca"s(faceImage)" th:ife"s(faceImage ne null)"class="img-fluid" alt=""/>
</div>
<div class="col-sm-4"
kimgstylea'th:src="s(backImage" th:ifa"s[backImagenenut1]"class="ing-fluid"alt="
</div>
</div
div
div class="row" styles"
cdivclass="col-md-12 mx-auto"
<divclasse"col-sm-4#2
Cp th:ifa"s(faceResult nenutlj"y<span>姓名：</span><span th:text="$(faceResult.name)"></span></p
Kp span>性别：</span><span span></p >
th:ifa"s(faceResult nuttj"><span>民族：</span>cspan th:texta"s ionality】n span>k/p
<pth:ife"s(faceResult nenutt).cspan>出生日期：</span><span th:texte" span>(/p
</span><span th:texte"
th:ife"sifaceResultne nul1)"><span>身份证号码：</span><span </span></p
</div
<div classe"col-sm-an
<pth:ifa"s(backResult ne null)"y<span>签发机关：</span><span th:texte"s(backResult.issue)"></span></p
<Pth:ifa"$(backResult ne nullj"><span>有效日期：</span><span th:texte"s(backResult.startDate)">cspan>-<span th:texte"s[backResult. </div>
div
上传完图片后，进行身份证识别之后来进行的展示。首先对俩张上传的图片进行了识别，使用 image 标签，然后这个 face image 和我们后端返回的一个文件图片文件的一个地址，同样使用了语法，当这个图片不为空的时候，才会展示出来。
下面一层是展示了身份证识别的文字结果，同样使用的是，图片结果不为空时，才展示出来。照片信息有姓名，性别，照片，出生日期，住址和身份证号码。
以上是前端页面的大致结构和实现的原理代码。
三、控制进程
下图为此项目的大致控制进程
package com.example.viapidemo
Cimport
eauthor joffre
edate 2026/4/6
public
acontroller
eRequestMapping("/") I
privateString uploadDirectoryi
privateOcrServiceocrService
private List<String
private List<String backIm
faceima
vate ListMapeString
String faceResults
String backResults
List<Map<String,
upLoadnt.
publicMainController(@Value("s(file.upload.path】") String uploadDirectory, OcrService ocrService)
th uploadDirectoryi
this.ocrService ocrService
ArrayList<>()
backImage ArrayList<>(
sults ArrayListc>(
backResults ArrayListc>()
)
privateString saveFile(MultipartFilefile)throwsException (
String
suffix StringUtils.substringAfterLost(file.getOriginalFilename() separator:
Stringfilename UUID.randomUUID().toString() suffix:
Path path Paths.get( uploadDirector filename
Files.copy(file.getInputStream() path.StandardCopy0ption,REPLACE_EXISTING);
filename
)
public
QRequestMapping()
Stringindex(Modelmodel)
size( ize
首先运用的 controller 以及 spring boot 提供的 public class maincontroller 加了注解。另外可以发现，定义了若干个奇偶变量。这四个变量未使用数据库，因此在内存里面缓存了一个上传图片和识别结果的信息。
package com.example.viapidemo
Eimport
/出★ @author joffre
b@(...)
public class MainController
privateString uploadDirectory;
privateOcrServiceocrService;
privateList<String) faceImages;
privateList<StringbackImages
privateList<Map<String,String>> faceResults;
private List<Map<String, String>>backResults;
public MainController(eValue("/Users/joffre/home/code/viapi-demo/target/classes/static/images/")String uploadt
private String saveFile(MultipartFile file) throws Exception
@RequestMapping()
public String index(Model model)
@PostMapping("/upload")
public String uploadFile(@RequestParam("face")MultipartFile face, @RequestParam("back") MultipartFile back, R
上图为俩个控制方法，一个是 uploadfile，另一个是 index。
Linux 是页面刚开始进来时，会通过此方法来加载模板。
前面的逻辑是俩个缓存的图片不一样时，就将它 clear 掉，这个程序也可以变得更加完善。
下面的逻辑是指如果之前上传过图片，人工识别之后，把这些前一次上传的结果和识别的结果去加载到首页上面，相当于可以做到重新刷新页面，之前识别的结果和已经上传的结果不会丢失，会展示在页面上。
