目錄
一、在阿里云申請ocr識別服務
二、創建springboot項目
三、后續
一、在阿里云申請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 {@Autowiredprivate 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 {@Autowiredprivate OkHttpClient okHttpClient;@Autowiredprivate 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 {@Beanpublic 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
_47)
 去除無效的干擾！巧妙轉化)
)