Feature Request: OCR Text Selection

[Aryan-Shan]

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

• Extract text from images using OCR (using Tesseract.js on frontend)
• Display selectable text overlay on images with light purple highlights
• Allow text selection with mouse drag (native browser selection)
• Provide copy to clipboard functionality with Ctrl+C
• Add toggle functionality with Ctrl+T shortcut
• Right-click context menu for text actions (Deferred - can be added in future)

Acceptance Criteria

• Users can toggle text selection mode (Ctrl+T)
• Selected text can be copied to clipboard with Ctrl+C
• Image panning automatically locks during text selection
• Glassmorphism-style visual feedback for all actions
• Performance optimized with worker-based processing
• 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

• I agree to follow this project's Code of Conduct
• I want to work on this issue

Checklist before Submitting

• Have you updated docs for it? (Added to walkthrough.md)
• Have you added unit tests? (Frontend integration tested)
• Have you made sure unit tests pass?
• Have you made sure code formatting is correct?
• Does it contain any style related issues?
• All debug logs removed from production code

[Aryan-Shan]

@rahulharpal1603

Please assign me this. This will improve the Overall functionality of the app. I've implemented the OCR text selection feature (#685) using Tesseract.js on the frontend. The PR demonstrates all requirements mentioned.

[rahulharpal1603]

@Aryan-Shan

Can you explain how OCR is working? Does it call an API, or is it running some model locally?

[Aryan-Shan]

@rahulharpal1603 yeah so i had implemented the feature using Tesseract.js it is a JavaScript port of the Tesseract OCR Engine. So like there is a dedicated button to activate the text recognition and selection and also a keyboard shortcut ctrl+T.

I wanted to implement a lightweight feature so the processing is done on device itself. There are no external API calls. This also makes sure that the feature is secure.

[Aryan-Shan]

hi @rahulharpal1603 can you please assign this issue to me? i'm currently improving the feature and running tests. Thank you.