ydy0615
1e58c18bbc
- Implement SHA-256 image hashing to cache OCR results and avoid re-processing identical images - Add 100MB file size limit for image uploads with user-friendly error messages - Clear ghost suggestions when uploading new images to prevent interference - Optimize size limit calculation in copilot plugin to include OCR context - Remove debug logging from production code - Add image processing optimization plan document BREAKING CHANGE: Image upload size limit is now enforced at 100MB (previously unlimited)
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上传回调添加同样逻辑 |
|