前言

经过前三天的划水笔记，今天终于需要写一个项目应用了。
项目：车辆信息识别
主要功能：车辆车牌号码识别，车型识别，以及一些无关紧要的信息输出。
项目采用：Java SpringBoot ，调用阿里云 Vision API。
项目结构以及部分内容参考：阿里云 Github Demo。

前端页面

CSS样式与JS脚本采用的是官方提供的快速好看且稳定。具体样式效果见后面的图片。

<!--index.html--><!DOCTYPE html><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 style=\"text-indent: 0.5em;\">VIAPI RecognizeLicensePlate</h2><div class=\"col-sm-12\"><p th:text=\"${message}\" th:if=\"${message ne null}\" class=\"alert alert-primary\"></p></div><br /><br /><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\"><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=\"${Image}\" th:if=\"${Image ne null}\" class=\"img-fluid\" alt=\"\"/></div></div></div><div class=\"row\" style=\"margin-top: 30px;\"><div class=\"col-md-12 mx-auto\"><div class=\"col-sm-4\"><p th:if=\"${Result ne null}\"><span>车牌号：</span><span th:text=\"${Result.plateNumber}\"></span></p><p th:if=\"${Result ne null}\"><span>类型：</span><span th:text=\"${Result.plateType}\"></span></p><p th:if=\"${Result ne null}\"><span>可信度：</span><span th:text=\"${Result.confidence}\"></span></p><p th:if=\"${Result ne null}\"><span>类型可信度：</span><span th:text=\"${Result.plateTypeConfidence}\"></span></p></div><div class=\"col-sm-4\"><p th:if=\"${Result ne null}\"><span>H：</span><span th:text=\"${Result.roi.h}\"></span></p><p th:if=\"${Result ne null}\"><span>W：</span><span th:text=\"${Result.roi.w}\"></span></p><p th:if=\"${Result ne null}\"><span>X：</span><span th:text=\"${Result.roi.x}\"></span></p><p th:if=\"${Result ne null}\"><span>Y：</span><span th:text=\"${Result.roi.y}\"></span></p></div></div></div></div></body></html>

后端实现

代码结构

主要代码更改

MainController.java

@Controller@RequestMapping(\"/\")public class MainController {@AutowiredServletContext context;private String uploadDirectory;private OcrService ocrService;private List<String> Images;private List<Map<String, String>> Results;public MainController(@Value(\"${file.upload.path}\") String uploadDirectory, OcrService ocrService) {this.uploadDirectory = uploadDirectory;this.ocrService = ocrService;Results = new ArrayList<>();Images = new ArrayList<>();}// ...@PostMapping(\"/upload\")public String uploadFile(@RequestParam(\"face\") MultipartFile face, RedirectAttributes attributes) {if (face.isEmpty()) {attributes.addFlashAttribute(\"message\", \"Please select a file to upload.\");return \"redirect:/\";}uploadDirectory = context.getRealPath(\"images\") + \"/\";System.out.println(uploadDirectory);String errorMessage = null;try {Path dir = Paths.get(uploadDirectory);if (!Files.exists(dir)) {Files.createDirectories(dir);}String filename = saveFile(face);Map<String, String> res = ocrService.RecognizeLicensePlate(uploadDirectory + filename);Images.add(\"/images/\" + filename);Results.add(res);} catch (TeaException e) {e.printStackTrace();errorMessage = JSON.toJSONString(e.getData());} catch (Exception e) {e.printStackTrace();errorMessage = e.getMessage();}if (StringUtils.isNotBlank(errorMessage)) {attributes.addFlashAttribute(\"message\", errorMessage);}return \"redirect:/\";}}

OcrService.java

public Map<String, String> RecognizeLicensePlate(String filePath) throws Exception {RecognizeLicensePlateAdvanceRequest request = new RecognizeLicensePlateAdvanceRequest();request.imageURLObject = Files.newInputStream(Paths.get(filePath));RecognizeLicensePlateResponse response = ocrClient.recognizeLicensePlateAdvance(request, runtime);System.out.println(JSON.toJSONString(response.data.plates));Map<String, String> map = JSON.parseObject(JSON.toJSONString(response.data.plates), new TypeReference<Map<String, String>>() {});return map;}