开发者学堂课程【达摩院视觉 AI 精品课：第三节课——【文字识别项目讲解及使用说明】】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/912/detail/14420
第三节课——【文字识别项目讲解及使用说明】（一）
内容介绍：
一、如何使用SDK
二、介绍Request阶层
三、OcrService的实现逻辑
一、如何使用SDK
首先进入智能视觉开放平台官网：http://vision.aliyun.com/，点击文字识别-身份证识别，点击查看产品文档，点击 SDK 参考，对 Java 来说有两种 SDK的选择，第一种是通用的 SDK，这里选择使用第二种的支持本地上传的 SDK。
接着复制下方说明里的链接粘贴到网页并在最后加一个 ocr/，目前代码使用的版本是1.0.3，点击就可以看到Maven坐标，也就是代码里使用 SDK 的坐标了。
接下来是整个项目的实现路径和其中需要注意的点和方法：
<html lang="en" xmlns:th="http:/ /www.thymeleaf.org">
<head>
<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="$imessage 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，.p1g，.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=”…”>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">开始识别</button>
</div>
</form>
</div>
</div>
<div class="row" style="margin-top: 30px; ">
<div class=col-md-12 mx-auto">
<div class="col-sm-4><img style="width: 100%;" th:src="${faceImagc}" 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"
mg-fluid" alt=""/>
</div>
</div>
</div>
<div class="row" style="…">
<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.click:”}></p>
</div>
</div>
</div>
</div>
</body>
效果如图：
以上就是一个前端页面结构以及它实现的逻辑点。
