Clipboard Image to Text Extractor (OCR)

Students constantly need text trapped inside images — a notice-board photo, a scanned invoice, a whiteboard full of action items, a screenshot of an error message. Retyping is slow and error-prone, while cloud OCR tools upload your images to someone else's server. This utility keeps everything on the device: paste any image from the clipboard (or load a file), and a real OCR pipeline extracts the text. The pipeline is the honest, classical kind taught in image-processing courses — grayscale conversion and binarization, line segmentation by horizontal projection profile, character segmentation by vertical projection, then template matching where each glyph is compared against reference glyphs rendered live from the same font. Every recognized character carries a confidence score, low-confidence characters are flagged in red, and bounding boxes overlay the source image so you can verify each reading. A before/after view shows the binarized image exactly as the engine sees it.

1. The user pastes a screenshot (clipboard API) or uploads an image file; it is drawn to a canvas.
2. The image is converted to grayscale and binarized with a fixed threshold, producing a black-and-white bitmap.
3. A horizontal projection profile (dark-pixel count per row) segments the bitmap into text lines.
4. Within each line, a vertical projection profile segments characters; narrow gaps merge split glyphs and wide gaps mark word spaces.
5. Each glyph is cropped, aspect-preserved into a 26×34 normalized bitmap and compared pixel-by-pixel against templates rendered live from the same monospace font (78 glyphs).
6. The best-matching template wins; confidence comes from the agreement margin over the runner-up.
7. Results render as text with a confidence heatmap, bounding boxes on the source, and the per-character detail grid.

Tech stack:

• HTML5 canvas · JavaScript (ES6)
• Clipboard API · FileReader
• Projection-profile segmentation
• Template matching (normalized bitmaps)
• Single-file app, zero dependencies
• Git

• [Paste-from-clipboard input] Press Ctrl+V with any screenshot copied — the image loads instantly; file upload works too.
• [Real OCR pipeline] Binarization, projection-based line and character segmentation, and template matching against live-rendered glyphs — all on-device, no cloud.
• [Per-character confidence] Every character is scored; the text view heatmaps high-confidence in amber and flags low-confidence characters in red.
• [Character bounding boxes] Toggleable boxes overlay each recognized character on the source image for visual verification.
• [Character detail grid] A per-glyph panel shows the normalized 26×34 bitmap the matcher actually compared, with its confidence.
• [Binarized preview] A before/after view shows the original next to the thresholded image the engine segments — the key debugging view for OCR.
• [One-click copy] The extracted text copies to the clipboard for pasting into reports and documents.
• [Sample images] Three built-in samples (notice board, whiteboard, invoice) demonstrate the pipeline immediately.

• Complete single-file OCR utility application
• OCR engine documentation (segmentation math, matching, confidence)
• Three built-in sample images with expected outputs
• Project report PDF (background, image-processing theory, methodology, test procedure)
• PPT presentation for final review
• Viva Q&A preparation document (binarization, projections, template matching, OCR limits)

• Built for clean printed text in a monospace-style font — handwriting, cursive and heavily stylized fonts are out of scope, stated honestly.
• Recognition quality depends on image clarity; skewed, blurry or low-contrast photos degrade results — the binarized preview shows why.
• Confidence scores are agreement-based heuristics from template matching, not calibrated probabilities.
• This is a classical template-matching OCR, not a neural-network recognizer — the report explains the tradeoff explicitly.