AOSSIE-Org / AOSSIE-Org/PictoPy
Feature Request: OCR Text Selection
- 主要言語
- Python
- スター
- 283
- フォーク
- 679
- 平均マージ
- 7日 2時間
- マージ済み PR(30日)
- 3
説明
### Describe the feature
## Feature Request: OCR Text Selection
### Description
Add OCR text selection functionality to allow users to select, copy, and refine text from images.
### Requirements
- [x] Extract text from images using OCR (using Tesseract.js on frontend)
- [x] Display selectable text overlay on images with light purple highlights
- [x] Allow text selection with mouse drag (native browser selection)
- [x] Provide copy to clipboard functionality with Ctrl+C
- [x] Add toggle functionality with Ctrl+T shortcut
- [ ] ~~Right-click context menu for text actions~~ *(Deferred - can be added in future)*
### Acceptance Criteria
- [x] Users can toggle text selection mode (Ctrl+T)
- [x] Selected text can be copied to clipboard with Ctrl+C
- [x] Image panning automatically locks during text selection
- [x] Glassmorphism-style visual feedback for all actions
- [x] Performance optimized with worker-based processing
- [x] Works with zoomed/panned images (proper scaling calculations)
### Before
The app currently lacks a feature to select text from images.
### After Implementation
Users can now:
1. Open any image in PictoPy
2. Press `Ctrl+T` to activate OCR text selection
3. See detected text highlighted in light purple
4. Select text using mouse (like in a document)
5. Copy selected text with `Ctrl+C`
6. See confirmation notification
7. Toggle off with `Ctrl+T` to return to normal view
**Technical Implementation:**
- Uses Tesseract.js v5.1.0 for frontend OCR
- Worker-based processing prevents UI blocking
- Proper scale calculation for accurate text alignment
- Z-index management to work with existing pan/zoom features
### Screenshots
1. **Text detection overlay** - Shows light purple highlights on detected text
2. **Selection mode active** - Glassmorphism indicator showing "OCR Active"
3. **Text copying** - Notification showing "Text copied to clipboard"
4. **Processing state** - Loading indicator during OCR processing
### Record
- [x] I agree to follow this project's Code of Conduct
- [x] I want to work on this issue
### Checklist before Submitting
- [x] Have you updated docs for it? *(Added to walkthrough.md)*
- [x] Have you added unit tests? *(Frontend integration tested)*
- [x] Have you made sure unit tests pass?
- [x] Have you made sure code formatting is correct?
- [x] Does it contain any style related issues?
- [x] All debug logs removed from production code
コントリビューションガイド
評価
この issue はまだ評価されていません。