Come usare il tesseract senza essere asgardiano…

Ciao, eh no…Marvel e cinecomics non c’entrano nulla, ma visto il nome di questa libreria era troppo invitante non fare riferimento al popolo guidato dal culturista biondo che brandisce un martellone svolazzando di galassia in galassia.

Oggi parliamo un po' di una libreria davvero interessante, ovvero Tesseract.js.

Grazie a questo magico pacchetto possiamo implementare nei nostri progetti un efficientissimo lettore OCR per ricavare del testo da una qualsiasi immagine.

Come funziona?

Nella pagina ufficiale di Github trovi una demo per metterlo subito alla prova. Dopo averlo installato, tramite CDN o npm basterà utilizzare il seguente script:

import { createWorker } from 'tesseract.js';

(async () => {
  const worker = await createWorker();
  await worker.loadLanguage('eng');
  await worker.initialize('eng');
  const ret = await worker.recognize('url_img');
  console.log(ret.data.text);
  await worker.terminate();
})();

Come suggerisce la documentazione ufficiale, è preferibile usare un worker.recognize() per ogni immagine da scansione e poi terminare il processo con worker.terminate().

Tesseract.js supporta immagini bmp, jpg, png, ppm e web, e ci permette anche di specificare una o più lingue presenti nell’immagine passando un array alla funzione createWorker() e poi inizializzando le lingue:

const worker = await createWorker();
await worker.loadLanguage('eng+it');
await worker.initialize('eng+it');

Per migliorare le nostre scansioni possiamo decidere quali caratteri riconoscere impostando una whitelist attraverso tessedit_char_whitelist in questo modo:

const { createWorker } = require('tesseract.js');

const worker = await createWorker();

(async () => {
  await worker.loadLanguage('eng');
  await worker.initialize('eng');
  await worker.setParameters({
    tessedit_char_whitelist: '0123456789', // recupero solo numeri
  });
  const { data: { text } } = await worker.recognize('url_img');
  console.log(text);
  await worker.terminate();
})();

Ma non è tutto! Tesseract ci consente di essere ancora più precisi scannerizzando una porzione dell’immagine, definendo un'area attraverso la variabile rectangle:

const { createWorker } = require('tesseract.js');

const worker = await createWorker();
const rectangle = { left: 0, top: 0, width: 500, height: 250 }; // area da scansionare

(async () => {
  await worker.loadLanguage('it');
  await worker.initialize('it');
  const { data: { text } } = await worker.recognize('url_img', { rectangle });
  console.log(text);
  await worker.terminate();
})();

Questo, in termini di usabilità, è fantastico, perché permette di creare un’area drag and drop, lasciando all’utente libera scelta su cosa selezionare e cosa no. Mi viene subito in mente un’implementazione con Cropper.js.

Altro suggerimento per gestire la UI eventualmente, è quello di fare un secondo controllo sui valori raccolti, che troviamo in text, ma questo dipende da cosa si vuole scannerizzare.

In un mio esperimento recente andavo a raccogliere delle date, quindi convertivo tutto in array e applicavo controlli con espressioni regolari usando array.every().

Detto questo, trovo Tesseract.js uno strumento fantastico, ben fatto, semplice da usare e super performante… un applauso agli sviluppatori!