4
JackLin的博客
首页
分类
标签
生活
时间轴
关于我
友链
搜索
管理员
阿里云AI训练营_Day05_创意日_图片识别文字
阿里云
图像识别
SpringBoot
Thymeleaf
发布日期:
2020-06-08 22:56:28
阅读量:
215
所属分类:
SpringBoot
## 项目介绍 参加阿里云AI训练营的第5天，也是最后一天了。今天是创意日，想做什么就做什么，没有题目约束。 那么我打算做一个简单的识别图片中的文字的应用，并部署上线，以后也可能经常会用到。 ## 项目用到的文档地址 阿里云达摩院视觉开放平台：https://vision.aliyun.com/ 阿里云视觉开放平台 “通用识别” 地址：https://help.aliyun.com/document_detail/151896.html?spm=a2c4g.11186623.6.620.44da1ded5yuZbF ## 项目开始 ### （1）说明 经过前面几天的训练，自我感觉良好。已经对阿里云的视觉开放平台比较熟悉了，也熟悉使用提供的API的一些基础的步骤，感觉就是这些套路。 那么就不啰嗦了，直接上代码。由于只用到了一个场景，所以代码也比较简单，记得测试前要到阿里云开启 “文字识别服务” 哦！  ### （2）导入Maven依赖 ```xml <dependency> <groupId>com.aliyun</groupId> <artifactId>ocr</artifactId> <version>1.0.3</version> </dependency> <!-- 阿里巴巴的 fstjson ，和 jackson 的功能类似，用来处理 json字符串--> <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.62</version> </dependency> ``` ### （3）创建Client，Config类 > AIService.java ```java private Client ocrClient; private RuntimeOptions runtimeOptions; @Value("${accessKeyId}") private String accessKeyId; @Value("${accessKeySecret}") private String accessKeySecret; @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); runtimeOptions = new RuntimeOptions(); } ``` ### （4）关键代码，调用API函数 这里由于我们需要上传图片，所以参数选择了一个 InputStream，直接从文件中获取输入流。 看文档我们知道，从图片中识别的文字会被封装在一个 data 里面，我们从这里面获取数据即可。  同时，经过测试，文字识别的过程是一行一行识别的，每行识别出来的文字都成为封装在数组的一个元素里面，所以我们定义一个 StringBuffer 对象，用来拼接这些生成的文字。 > AiService.java ```java public String myRecognizeCharacter(InputStream is) throws Exception { RecognizeCharacterAdvanceRequest request = new RecognizeCharacterAdvanceRequest(); request.imageURLObject = is; request.minHeight = 10; request.outputProbability = true; RecognizeCharacterResponse response = ocrClient.recognizeCharacterAdvance(request, runtimeOptions); StringBuffer result = new StringBuffer(); for (RecognizeCharacterResponse.RecognizeCharacterResponseDataResults item:response.data.results ) { result.append(item.text + "\n"); } return result.toString(); } ``` ### （5）文件上传逻辑 我们在 Service 层实现文件上传的逻辑，然后在 Controller 层调用，并返回上传之后的文件名。 > AiService.java ```java public String uploadImage(MultipartFile file, HttpServletRequest request) { //获取文件名 : file.getOriginalFilename(); String uploadFileName = file.getOriginalFilename(); System.out.println("上传文件名 : "+uploadFileName); String uuid = UUID.randomUUID().toString().replaceAll("-", ""); System.out.println(uuid); String newFileName = "AI-Word-" + uuid + "-" + uploadFileName; //上传路径保存设置 UUID String path = request.getServletContext().getRealPath("/upload"); // String path = "src/main/resources/static/upload"; //如果路径不存在，创建一个 File realPath = new File(path); if (!realPath.exists()){ realPath.mkdir(); } System.out.println("上传文件保存地址："+realPath); InputStream is = null; //文件输入流 OutputStream os = null; try { is = file.getInputStream(); os = new FileOutputStream(new File(realPath, newFileName)); //文件输出流 //读取写出 int len=0; byte[] buffer = new byte[1024]; while ((len=is.read(buffer))!=-1){ os.write(buffer,0,len); os.flush(); } } catch (IOException e) { e.printStackTrace(); } finally { try { os.close(); } catch (IOException e) { e.printStackTrace(); } try { is.close(); } catch (IOException e) { e.printStackTrace(); } } return newFileName; } ``` ### （6）Controller 层的逻辑 下面我们来看一下 Controller 层的代码，主要就是实现视图的跳转。然后调用 Service 层，获得数据并放在 Model 中并返回给前端 > AiController.jva ```java @Controller public class AIController { @Autowired private AIService aiService; @RequestMapping("/") public String toMain() { return "main"; } @RequestMapping("/fileupload") public String fileUpload(@RequestParam("file") MultipartFile file , HttpServletRequest request, Model model) throws IOException { // 1. 文件上传,返回上传之后新的文件名称 String newFileName = aiService.uploadImage(file, request); // 2. 图片中文字内容识别 InputStream is = file.getInputStream(); String resultWord = null; try { resultWord = aiService.myRecognizeCharacter(is); } catch (Exception e) { e.printStackTrace(); } model.addAttribute("result", "/upload/" + newFileName); model.addAttribute("word", resultWord); return "result"; } } ``` ### （7） 前端部分 最后再来看一下前端部分代码： > Result.html ```html <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; border: 1px solid #ff5037; margin-top: 70px; } img { height: 400px; } </style> </head> <body> <div th:text="${word}"></div> <img th:src="@{${result}}" alt=""> </body> </html> ``` ## 测试 先进入主页面，选择图片并点击上传按钮：  识别出来的结果：  ## 阿里云高校计划 最后在贴一张阿里云的广告：”阿里云高校计划“，快来加入我们吧！ 
