80 lines
2.6 KiB
Markdown
80 lines
2.6 KiB
Markdown
|
# 图片处理优化计划
|
|||
|
|
|
|||
|
|
## 需求概述
|
|||
|
|
1. 图片上传大小限制为100MB
|
|||
|
|
2. 为每个图片做哈希，相同哈希不重复调用OCR
|
|||
|
|
3. 上传图片时打断之前的ghost text
|
|||
|
|
|
|||
|
|
## 需要修改的文件
|
|||
|
|
|
|||
|
|
### 1. `src/utils/ocrCache.js` - 扩展OCR缓存模块
|
|||
|
|
|
|||
|
|
**新增功能：**
|
|||
|
|
- 图片哈希缓存：`imageHashCache` Map，用于存储 `hash -> ocrText` 的映射
|
|||
|
|
- 哈希计算函数：使用 `crypto.subtle.digest('SHA-256', imageBytes)` 计算哈希
|
|||
|
|
- 哈希检查函数：在OCR前检查哈希是否已存在
|
|||
|
|
- 100MB大小限制常量
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 新增
|
|||
|
|
export const IMAGE_SIZE_LIMIT = 100 * 1024 * 1024 // 100MB
|
|||
|
|
|
|||
|
|
export async function calculateImageHash(imageBytes) {
|
|||
|
|
const hashBuffer = await crypto.subtle.digest('SHA-256', imageBytes)
|
|||
|
|
const hashArray = Array.from(new Uint8Array(hashBuffer))
|
|||
|
|
return hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function getOcrByHash(hash) {
|
|||
|
|
return imageHashCache.get(hash) || ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function setOcrByHash(hash, text) {
|
|||
|
|
imageHashCache.set(hash, text)
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. `src/components/MilkdownEditor.vue` - 修改图片上传逻辑
|
|||
|
|
|
|||
|
|
**修改点：**
|
|||
|
|
|
|||
|
|
1. **`handleImageUpload` 函数 (约第392行)**
|
|||
|
|
- 添加文件大小检查，超过100MB则提示错误
|
|||
|
|
- 计算图片哈希，检查是否已存在OCR结果
|
|||
|
|
- 上传图片前调用 `clearGhostSuggestion` 打断现有ghost text
|
|||
|
|
|
|||
|
|
2. **`performOCR` 函数 (约第212行)**
|
|||
|
|
- 接收哈希参数，OCR完成后存储到哈希缓存
|
|||
|
|
|
|||
|
|
3. **Milkdown `onUpload` 回调 (约第267行)**
|
|||
|
|
- 同样添加大小限制和哈希检查
|
|||
|
|
|
|||
|
|
### 3. `src/plugins/copilotPlugin.ts` - 可能需要导出清除函数
|
|||
|
|
|
|||
|
|
- 确保 `clearGhostSuggestion` 可以被外部调用（目前已导出）
|
|||
|
|
|
|||
|
|
## 实现步骤
|
|||
|
|
|
|||
|
|
```mermaid
|
|||
|
|
graph TD
|
|||
|
|
A[用户上传图片] --> B{文件大小 <= 100MB?}
|
|||
|
|
B -->|否| C[提示文件过大错误]
|
|||
|
|
B -->|是| D[计算图片哈希]
|
|||
|
|
D --> E{哈希已存在OCR结果?}
|
|||
|
|
E -->|是| F[直接使用缓存的OCR结果]
|
|||
|
|
E -->|否| G[调用OCR API]
|
|||
|
|
G --> H[存储OCR结果到哈希缓存]
|
|||
|
|
F --> I[打断现有ghost text]
|
|||
|
|
H --> I
|
|||
|
|
I --> J[插入图片到编辑器]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 关键代码修改位置
|
|||
|
|
|
|||
|
|
| 文件 | 函数/位置 | 修改内容 |
|
|||
|
|
|------|-----------|----------|
|
|||
|
|
| `src/utils/ocrCache.js` | 新增 | 添加哈希相关函数和常量 |
|
|||
|
|
| `src/components/MilkdownEditor.vue` | `handleImageUpload` | 添加大小检查、哈希检查、打断ghost text |
|
|||
|
|
| `src/components/MilkdownEditor.vue` | `performOCR` | 接收哈希参数 |
|
|||
|
|
| `src/components/MilkdownEditor.vue` | `onUpload` | Milkdown上传回调添加同样逻辑 |
|