So bringen Sie dem Browser bei, Text aus Bildern zu lesen – ohne serverseitige Magie

Stellen Sie sich vor, Sie entwickeln eine Web-App für Ausgabenverwaltung, und der Benutzer muss Daten von Belegen manuell eingeben. Das ist langweilig, langsam und frankly veraltet. Sie möchten einfach ein Foto von einem Stück Papier machen und sofort die Zahlen in der Datenbank haben. Normalerweise richten Sie für solche Aufgaben schwere Python-Dienste mit OCR ein oder bezahlen Cloud-Giganten für jede Anfrage. Aber es gibt einen einfacheren und, was noch wichtiger ist, kostenlosen Weg.

Wir sprechen von Tesseract.js. Dabei handelt es sich um einen JavaScript-Port der legendären Tesseract-OCR-Engine, die direkt im Browser oder auf Node.js läuft.

Was ist das überhaupt

Tesseract.js ist nicht nur ein Wrapper über eine API. Die Entwickler haben die ursprüngliche C++-Engine genommen, sie zu WebAssembly kompiliert und in eine praktische JS-Bibliothek verpackt. Das Ergebnis: vollwertige Texterkennung, die clientseitig läuft.

Warum ist das nötig? Erstens Datenschutz. Benutzerdaten gehen nicht an Ihren Server, alles wird lokal verarbeitet. Zweitens Kosteneinsparung bei der Infrastruktur. Ihre Server verschwenden keine Ressourcen für schwere Mustererkennungsberechnungen – diese Arbeit erledigt der Prozessor des Benutzers.

So bringen Sie es in ein paar Minuten zum Laufen

Die Bibliothek unterstützt über 100 Sprachen, darunter auch Russisch. Für den Einstieg brauchen Sie nur ein paar Zeilen Code. Hier ist ein einfaches Beispiel für Node.js oder Browser mit Modulen:

import { createWorker } from 'tesseract.js';

(async () => {
  // Создаем воркер и указываем язык (например, английский)
  const worker = await createWorker('eng');
  
  // Скармливаем картинку — это может быть URL, путь к файлу или Blob
  const ret = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');
  
  console.log(ret.data.text);
  
  // Не забываем прибраться за собой
  await worker.terminate();
})();

Wenn Sie einen Stapel von Fotos verarbeiten müssen, ist es keine gute Idee, für jedes einen Worker zu erstellen. Es ist besser, ihn einmal zu initialisieren, alle Bilder durch die recognize-Methode laufen zu lassen und ihn erst dann zu schließen.

Was kann die Bibliothek sonst noch, außer einfachem Text

Das Projekt hat einfaches Buchstabenlesen längst hinter sich gelassen. Neuere Versionen (aktuell v5 und v6) brachten viele nützliche Funktionen mit.

Die Bibliothek erkennt die Textausrichtung automatisch. Wenn der Benutzer ein seitliches Foto hochlädt, versucht Tesseract.js, es für bessere Ergebnisse zu drehen. Sie können sogar Zwischenbilder extrahieren: sehen Sie, wie der Algorithmus das Bild in Schwarzweiß umgewandelt oder Rauschen entfernt hat.

Interessanterweise kann das Projekt mit Echtzeit-Video arbeiten. Sie können die Kamera Ihres Smartphones auf ein Preisschild richten, und das Skript „zieht