# PicOCR-Slice

**Repository Path**: javazhangyin/PicOCR-Slice

## Basic Information

- **Project Name**: PicOCR-Slice
- **Description**: 本项目旨在创建一个网页应用，用户可以在左侧选择并截取图片的一部分，然后通过 OCR 技术识别截取区域中的文字，并将识别的文字自动填入右侧的输入框中。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2025-03-19
- **Last Updated**: 2025-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OCR文字识别工具

## 项目简介

OCR文字识别工具是一个基于Spring Boot和现代前端技术开发的Web应用，旨在提供高效、便捷的文字识别功能。用户可以上传图片，通过鼠标选择特定区域，系统会自动识别该区域内的文字，并支持将识别结果填入表单字段。

本工具通过服务器端OCR服务提供高精度的文字识别，支持多种图片格式和复杂文字场景。

## 功能特点

- **图片上传与预览**：支持上传本地图片并实时预览
- **区域选择**：通过鼠标拖拽选择需要识别的图片区域
- **高精度识别**：服务器端OCR引擎提供高精度文字识别
- **多结果展示**：显示所有可能的识别结果，并标注置信度
- **表单填充**：一键将识别结果填入指定表单字段
- **结果复制**：支持一键复制所有已填写字段内容
- **响应式设计**：适配各种屏幕尺寸，包括移动设备

## 技术栈

### 前端
- HTML5 + CSS3 + JavaScript (ES6+)
- 响应式设计

### 后端
- Spring Boot 2.x
- RESTful API
- 第三方OCR服务集成
- FastJSON 用于JSON处理
- SLF4J 用于日志记录

## 系统架构
  ```
+------------------+        +------------------+        +------------------+
|                  |        |                  |        |                  |
|   Web 前端       |<------>|   Spring Boot    |<------>|   OCR 服务       |
|   (浏览器)       |   HTTP  |   后端应用       |   HTTP  |   (第三方API)    |
|                  |        |                  |        |                  |
+------------------+        +------------------+        +------------------+
  ```

## 快速开始

### 环境要求
- JDK 8+
- Maven 3.6+
- 现代浏览器（Chrome, Firefox, Edge等）
- 网络连接（用于访问OCR服务）

### 安装步骤

1. 克隆项目到本地
   ```bash
   git clone https://github.com/yourusername/ocr-tool.git
   cd ocr-tool
   ```

2. 配置OCR服务

   使用百度飞浆构建OCR服务 可以参考我的知乎： [百度飞浆OCR docker 部署](https://zhuanlan.zhihu.com/p/663426508)

   在`src/main/resources/application.properties`中配置您的OCR服务API密钥和URL：
   ```properties
   ocr.service.url=https://your-ocr-service-url
   ocr.service.apiKey=your-api-key
   ```

3. 使用Maven构建项目
   ```bash
   mvn clean package
   ```

4. 运行应用
   ```bash
   java -jar target/ocr-tool-0.0.1-SNAPSHOT.jar
   ```

5. 访问应用
   打开浏览器，访问 `http://localhost:8080`

## 详细使用指南

### 1. 上传图片
- 点击"选择图片"按钮，从本地文件系统选择需要识别的图片
- 支持的图片格式：JPG, PNG, BMP, GIF等常见格式
- 图片会在左侧面板中预览显示

### 2. 选择目标字段
- 点击右侧输入框中的任意一个字段，激活该字段
- 激活的字段将被高亮显示，表示当前识别结果将填入此字段
- 状态栏会显示当前选中的字段名称

### 3. 选择识别区域
- 在预览图片上按住鼠标左键并拖动，选择要识别的文字区域
- 选择区域会以红色虚线框显示
- 释放鼠标后，系统会自动开始识别该区域内的文字

### 4. 查看识别结果
- 识别过程中，状态栏会显示当前识别进度
- 识别完成后，结果会显示在"识别结果列表"区域
- 每个结果项包含识别文本、置信度和"使用此结果"按钮

### 5. 使用识别结果
- 点击任意结果项下的"使用此结果"按钮，将该结果填入当前激活的字段

### 6. 管理表单内容
- 使用"清空所有字段"按钮可以一次性清除所有输入框的内容
- 使用"复制所有内容"按钮可以将所有已填写字段的内容复制到剪贴板
- 使用"清除图片"按钮可以移除当前预览的图片和识别结果

## API文档

### OCR识别API

#### 1. 文件上传识别

- **URL**: `/api/ocr/recognize`
- **方法**: POST
- **Content-Type**: multipart/form-data
- **参数**: 
  - `file`: 图片文件
- **响应**: JSON格式的识别结果
- **示例请求**:
  ```bash
  curl -X POST -F "file=@image.jpg" http://localhost:8080/api/ocr/recognize
  ```
- **示例响应**:
  ```json
  {
    "msg": "",
    "results": [[
      {
        "confidence": 0.9646627306938171,
        "text": "快乐暑假17",
        "text_region": [[710, 117], [1184, 130], [1181, 214], [707, 200]]
      },
      {
        "confidence": 0.9664310216903687,
        "text": "学习园地",
        "text_region": [[98, 373], [364, 380], [363, 442], [96, 435]]
      }
    ]],
    "status": "000"
  }
  ```

#### 2. Base64图片识别

- **URL**: `/api/ocr/recognize-base64`
- **方法**: POST
- **Content-Type**: application/json
- **请求体**: 
  ```json
  {
    "base64Image": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA..."
  }
  ```
- **响应**: JSON格式的识别结果，格式同上

#### 3. 服务状态检查

- **URL**: `/api/ocr/status`
- **方法**: GET
- **响应**: 
  ```json
  {
    "status": 0,
    "message": "服务正常"
  }
  ```

## 配置说明

在`application.properties`文件中可以配置以下参数：
properties
服务器端口
server.port=8080
OCR服务配置
ocr.service.url=https://your-ocr-service-url
ocr.service.apiKey=your-api-key
上传文件大小限制
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB
日志级别
logging.level.com.example.demo=INFO


## 项目结构
  ```
src/
├── main/
│ ├── java/
│ │ └── com/
│ │ └── example/
│ │ └── demo/
│ │ ├── controller/
│ │ │ └── OcrController.java # OCR API控制器
│ │ ├── service/
│ │ │ └── OcrService.java # OCR服务实现
│ │ └── DemoApplication.java # 应用入口
│ └── resources/
│ ├── static/
│ │ ├── index.html # 前端页面
│ │ ├── script.js # 前端JavaScript
│ │ └── styles.css # 前端样式
│ └── application.properties # 应用配置
└── test/
└── java/
└── com/
└── example/
└── demo/
└── DemoApplicationTests.java # 测试类
 ```

## 性能优化

1. **图像处理优化**：
   - 在前端进行图像裁剪，减少传输数据量
   - 使用PNG格式保存截取区域，确保文字清晰度

2. **用户体验优化**：
   - 添加加载指示器，提供视觉反馈
   - 识别结果按置信度排序，优先展示最可能正确的结果
   - 响应式设计，适配不同设备

## 常见问题解答

### Q: 为什么识别结果不准确？
A: OCR识别准确度受多种因素影响，包括图像质量、文字清晰度、字体类型等。尝试选择更清晰的图像区域，或调整选择区域以包含完整文字。

### Q: 如何处理多语言文字？
A: 当前配置支持中文和英文识别。如需支持其他语言，需要在OCR服务配置中添加相应的语言支持。

### Q: 识别结果中出现了意外的字符，如何处理？
A: OCR识别可能会将图像中的噪点或装饰元素误识别为文字。尝试更精确地选择文字区域，避免包含非文字元素。

## 贡献指南

1. Fork 本仓库
2. 创建您的特性分支 (`git checkout -b feature/amazing-feature`)
3. 提交您的更改 (`git commit -m 'Add some amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 打开一个 Pull Request

## 版本历史

- **1.0.0** (2023-XX-XX)
  - 初始版本发布
  - 支持图片上传和区域选择
  - 实现服务器端OCR识别
  - 添加多结果展示功能

## 许可证

本项目采用 Apache License 2.0 许可证 



项目链接: [https://gitee.com/javazhangyin/PicOCR-Slice](https://gitee.com/javazhangyin/PicOCR-Slice)

---

![OCR工具截图](https://foruda.gitee.com/images/1742353254246035571/f1640d9d_457066.png "屏幕截图")

感谢使用OCR文字识别工具！如有任何问题或建议，欢迎提交Issue或联系项目维护者。