目录
一、在阿里云申请ocr识别服务
在线体验：房产证图片上传
[阿里官方]不动产权证OCR文字识别_API专区_云市场-阿里云 (aliyun.com)
可以选择一毛500次这个
当然也可以白嫖100
下面有个在线调试，类似于apifox/postman,在线的发送http请的网站，这里你可以看到post请求的url是，httpbody部分需要一个json格式的字符串
二、创建springboot项目
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
<version>4.9.3</version> <!-- 使用最新版本 -->
</dependency>okhttp主要是模拟对阿里云接口发送http请求
需要对图片进行base64转码
@RestController
@RequestMapping("/ocr")
public class OcrController {
@Autowired
private OwnershipService ownershipService;
@RequestMapping("/ownership")
public String ownershipCertificate(@RequestParam("file") MultipartFile file) throws IOException {
System.out.println(file.getOriginalFilename());
return ownershipService.getData(file.getBytes());
}
}base64图片转码
这里重写两种转码方式
public class ImageToBase64 {
public static String imageToBase64(String imagePath) throws IOException {
File file = new File(imagePath);
byte[] bytes = new byte[(int) file.length()];
try (FileInputStream fis = new FileInputStream(file)) {
fis.read(bytes);
}
return Base64.getEncoder().encodeToString(bytes);
}
public static String imageToBase64(byte[] bytes) throws IOException {
return Base64.getEncoder().encodeToString(bytes);
}
}service层
@Service
public class OwnershipService {
@Autowired
private OkHttpClient okHttpClient;
@Autowired
private ObjectMapper objectMapper;
private String appcode = "自己申请的";
public String getData(byte[] imageBody) {
String ret = "";
try {
// 1. 准备请求体
ImageBody body = new ImageBody();
body.setImg(ImageToBase64.imageToBase64(imageBody));
// 2. 确保APPCODE正确
// 3. 创建请求
MediaType JSON = MediaType.get("application/json; charset=utf-8");
String jsonBody = objectMapper.writeValueAsString(body);
Request request = new Request.Builder()
.url("https://bdcqz.market.alicloudapi.com/ocrservice/estateCert")
.post(RequestBody.create(jsonBody, JSON))
.addHeader("Authorization", "APPCODE " + appcode)
.addHeader("Content-Type", "application/json; charset=UTF-8")
.build();
// 4. 执行请求并处理响应
try (Response response = okHttpClient.newCall(request).execute()) {
if (!response.isSuccessful()) {
String errorBody = response.body().string();
throw new IOException(
"API请求失败:\n" +
"状态码: " + response.code() + "\n" +
"错误信息: " + response.message() + "\n" +
"响应体: " + errorBody
);
}
ret = response.body().string();
System.out.println("识别结果: " + ret);
}
} catch (Exception e) {
System.err.println("发生错误: " + e.getMessage());
e.printStackTrace();
}
return ret;
}
}okhttp记得交给spring来管理
@Configuration
public class OkHttpConfig {
@Bean
public OkHttpClient okHttpClient() {
OkHttpClient okHttpClient = new OkHttpClient();
return okHttpClient;
}
}index,html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>房产证图片上传</title>
<style>
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.upload-area {
border: 2px dashed #3498db;
border-radius: 5px;
padding: 30px;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s;
}
.upload-area:hover {
background-color: #f0f8ff;
border-color: #2980b9;
}
.upload-icon {
font-size: 48px;
color: #3498db;
margin-bottom: 15px;
}
.upload-text {
font-size: 16px;
margin-bottom: 10px;
}
.file-input {
display: none;
}
.preview-container {
display: none;
margin-top: 20px;
text-align: center;
}
.preview-image {
max-width: 100%;
max-height: 400px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.btn {
background-color: #3498db;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
display: block;
margin: 20px auto 0;
}
.btn:hover {
background-color: #2980b9;
}
.requirements {
margin-top: 30px;
padding: 15px;
background-color: #f8f9fa;
border-radius: 5px;
font-size: 14px;
}
.requirements h3 {
margin-top: 0;
color: #2c3e50;
}
.error-message {
color: #e74c3c;
text-align: center;
margin-top: 10px;
display: none;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
<div class="container">
<h1>OCR-房产证图片上传</h1>
<div class="requirements">
<h3>上传要求：</h3>
<ul>
<li>请上传清晰、完整的房产证图片</li>
<li>图片需包含房产证全部内容，无遮挡</li>
<li>确保图片光线充足，文字清晰可辨</li>
<li>支持 JPG、PNG 格式，大小不超过 5MB</li>
<li>请勿上传与房产证无关的图片</li>
</ul>
</div>
<div class="upload-area" id="uploadArea">
<div class="upload-icon">📁</div>
<div class="upload-text">点击或拖拽房产证图片到此处</div>
<div class="upload-subtext">支持 JPG、PNG 格式，大小不超过 5MB</div>
<input type="file" id="fileInput" class="file-input" accept="image/jpeg, image/png">
</div>
<div class="error-message" id="errorMessage"></div>
<div class="preview-container" id="previewContainer">
<img id="previewImage" class="preview-image" src="#" alt="房产证预览">
<button class="btn" id="uploadBtn">确认上传</button>
</div>
<div class="result">
</div>
</div>
<script>
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const previewContainer = document.getElementById('previewContainer');
const previewImage = document.getElementById('previewImage');
const uploadBtn = document.getElementById('uploadBtn');
const errorMessage = document.getElementById('errorMessage');
let selectedFile = null;
// 点击上传区域触发文件选择
uploadArea.addEventListener('click', () => {
fileInput.click();
});
// 拖放功能
uploadArea.addEventListener('dragover', (e) => {
e.preventDefault();
uploadArea.style.backgroundColor = '#f0f8ff';
uploadArea.style.borderColor = '#2980b9';
});
uploadArea.addEventListener('dragleave', () => {
uploadArea.style.backgroundColor = '';
uploadArea.style.borderColor = '#3498db';
});
uploadArea.addEventListener('drop', (e) => {
e.preventDefault();
uploadArea.style.backgroundColor = '';
uploadArea.style.borderColor = '#3498db';
if (e.dataTransfer.files.length) {
handleFile(e.dataTransfer.files[0]);
}
});
// 文件选择处理
fileInput.addEventListener('change', () => {
if (fileInput.files.length) {
handleFile(fileInput.files[0]);
}
});
// 处理选择的文件
function handleFile(file) {
// 验证文件类型
const validTypes = ['image/jpeg', 'image/png'];
if (!validTypes.includes(file.type)) {
showError('请上传 JPG 或 PNG 格式的图片');
return;
}
// 验证文件大小 (5MB)
if (file.size > 5 * 1024 * 1024) {
showError('图片大小不能超过 5MB');
return;
}
selectedFile = file;
// 预览图片
const reader = new FileReader();
reader.onload = (e) => {
previewImage.src = e.target.result;
previewContainer.style.display = 'block';
errorMessage.style.display = 'none';
};
reader.readAsDataURL(file);
}
// 显示错误信息
function showError(message) {
errorMessage.textContent = message;
errorMessage.style.display = 'block';
previewContainer.style.display = 'none';
}
// 上传按钮点击事件
uploadBtn.addEventListener('click', () => {
// 这里添加实际上传逻辑
alert('房产证图片已上传，正在识别中');
const formData = new FormData();
formData.append('file', selectedFile);
$.ajax({
url: '/ocr/ownership',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (data) {
let jsonData = JSON.parse(data);
console.log(jsonData)
let resultDiv = document.querySelector('.result');
let str = '<h1>' + 'OCR-房产证-识别结果';
for (let val of jsonData.prism_keyValueInfo) {
if (val.value != null && val.value.length > 0){
str += '<h2>' + val.key + ': ' + val.value + '</h2>'
}
}
resultDiv.innerHTML = str;
}
});
});
</script>
</body>
</html>三、后续
- 增加其他ocr识别服务
- 增加统一结果返回
- 统一处理全局异常
- 增加在pom文件处统一管理appcode