Text Recognition

What this package is about?

This package implements basic OCR logic which recognises and highlights text on image.

Installation

$ npm install text-recognition

...or using yarn:

$ yarn add text-recognition

Usage

const ocr = new Ocr({languages: ['eng', 'ukr']});

// add a callback for word selection and copying formatted text (should be done once on first render)
ocr.addSelectionListener();
// add progress listener to see the progress of OCR
ocr.addProgressListener(e => console.log(e));
// parsing image and processing OCR
await ocr.parseImage(image);
// appends generated HTML to the container
// 0.7 it's the scale of the container compared to the original image size.
await ocr.appendHtml(container, 0.7);

List of available language you can find here

While unmounting don't forget to remove listeners

ocr.removeSelectionListener();

Styling

Import SelectableElement.css to your project or add custom styles:

.text-recognition-word {
    color: transparent;
    opacity: .5;
}

.text-recognition-word::selection {
    background: transparent;
}