Zuletzt aktualisiert: 12. September

OCR im Browser mit tesseract.js integrieren

Tim Koschützki

Mitgründer · Berlin, Deutschland ·

Optical Character Recognition (OCR) war traditionell eine serverseitige Aufgabe, bei der Nutzer Dokumente zur Verarbeitung auf einen Server hochladen mussten. Dank der Fortschritte bei Webtechnologien lässt sich die Texterkennung inzwischen jedoch direkt im Browser durchführen. Dieser Wandel hin zu OCR im Browser bietet sofortiges Feedback, besseren Datenschutz und eine geringere Serverlast. In diesem Artikel zeigen wir, wie Sie OCR mithilfe der Open-Source-Bibliothek Tesseract.js in Ihre Webanwendungen integrieren und so eine sofortige Texterkennung ermöglichen, ohne den Browser zu verlassen.

Warum OCR im Browser?

OCR im Browser auszuführen bietet mehrere Vorteile:

Sofortiges Feedback: Nutzer erhalten sofort Ergebnisse, ohne auf die Serververarbeitung warten zu müssen.
Besserer Datenschutz: Sensible Dokumente verlassen niemals das Gerät der Nutzer, was Datenschutzbedenken ausräumt.
Geringere Serverlast: Die Verlagerung der Verarbeitung auf den Client senkt Serverkosten und Ressourcenverbrauch.
Offline-Fähigkeit: OCR kann offline laufen, nachdem die Anwendung, das Worker-Skript, der WASM-Kern und die benötigten Sprachdaten heruntergeladen und für die Offline-Nutzung zwischengespeichert wurden. Das CDN-Beispiel weiter unten benötigt beim ersten Aufruf eine Netzwerkverbindung.

Vorstellung von tesseract.js: eine leistungsstarke Open-Source-OCR-Bibliothek

Tesseract.js ist eine Open-Source-JavaScript-Bibliothek, die die robusten Fähigkeiten der Tesseract-OCR-Engine von Google in Webanwendungen bringt. Version 6.0.0 enthält deutliche Verbesserungen bei Speicherverwaltung, Laufzeit-Performance und allgemeiner Stabilität. Die Bibliothek konzentriert sich nun auf die zentrale Texterkennung; alle Ausgabeformate außer „text“ sind für optimale Performance standardmäßig deaktiviert.

Neu in tesseract.js v6.0.0

Tesseract.js v6.0.0 bringt mehrere wichtige Verbesserungen mit:

Behobene Speicherlecks für stabilere, langlaufende Sitzungen.
Geringere Laufzeit und geringerer Speicherverbrauch für schnellere Texterkennung.
Andere Ausgabeformate als „text“ sind standardmäßig deaktiviert, um die Performance zu steigern.
Vereinfachte API-Initialisierung für eine einfachere Integration.

Browser-Kompatibilität und Voraussetzungen

Verwenden Sie einen aktuellen Chrome-, Firefox-, Safari- oder Edge-Browser mit Unterstützung für WebAssembly (WASM) und Web Worker. WASM-Unterstützung allein garantiert noch keine Kompatibilität mit allen Abhängigkeiten von Tesseract.js.

Hinweis

Stellen Sie sicher, dass Ihr Server WebAssembly-Dateien korrekt mit dem MIME-Typ „application/wasm“ ausliefert.

Erste Schritte mit tesseract.js

Installation

Sie können Tesseract.js mit npm zu Ihrem Projekt hinzufügen:

npm install tesseract.js@6

Oder binden Sie es über ein CDN ein:

<script src="https://unpkg.com/tesseract.js@v6.0.0/dist/tesseract.min.js"></script>

Hinweis

Tesseract.js lädt die erforderlichen WASM-Dateien automatisch. Stellen Sie sicher, dass Ihr Server die korrekten MIME-Typen für WASM unterstützt.

Einfaches Beispiel: Text aus einem Bild erkennen

Das folgende einfache Beispiel zeigt, wie Sie OCR auf ein Bild anwenden. Binden Sie das CDN-Skript von oben vor diesem Block ein. Tesseract.js akzeptiert Bilder; rendern Sie PDF-Seiten mit einem separaten PDF-Renderer in Bilder, bevor Sie sie an die OCR übergeben.

<input type="file" id="imageInput" accept="image/*" />
<div id="result"></div>

<script>
  async function performOCR(file) {
    const worker = await Tesseract.createWorker('eng', 1, {
      logger: (msg) => console.log('Worker progress:', msg),
      errorHandler: () => console.error('OCR worker failed.'),
    })
    try {
      const {
        data: { text },
      } = await worker.recognize(file)
      return text
    } finally {
      await worker.terminate()
    }
  }

  document.getElementById('imageInput').addEventListener('change', async (e) => {
    const file = e.target.files[0]
    const resultElement = document.getElementById('result')

    if (!file) return

    if (!file.type.startsWith('image/')) {
      resultElement.textContent = 'Please select an image file.'
      return
    }

    resultElement.textContent = 'Processing…'

    try {
      const text = await performOCR(file)
      resultElement.textContent = text
    } catch {
      resultElement.textContent = 'Unable to recognize this image. Please try another image.'
    }
  })
</script>

Mehrere Sprachen verarbeiten

Das Fehlerereignis des Workers wird von errorHandler behandelt; eine fehlgeschlagene Erkennung führt weiterhin dazu, dass das Promise von recognize() abgelehnt wird, und finally beendet den initialisierten Worker.

Tesseract.js unterstützt verschiedene Sprachen. So führen Sie OCR für Bilder durch, die Text in mehreren Sprachen enthalten:

async function performMultilingualOCR(file, languages = ['eng', 'deu']) {
  const worker = await Tesseract.createWorker(languages, 1, {
    logger: (msg) => console.log('Worker progress:', msg),
    errorHandler: () => console.error('OCR worker failed.'),
  })
  try {
    const {
      data: { text },
    } = await worker.recognize(file)
    return text
  } finally {
    await worker.terminate()
  }
}

Performance-Optimierung

Mit einigen zusätzlichen Techniken lassen sich Performance und Genauigkeit der OCR verbessern.

Bildvorverarbeitung

Probieren Sie Filter oder eine Größenänderung Ihrer Eingabebilder aus und vergleichen Sie die Erkennungsgenauigkeit. Beim Verkleinern kann kleiner Text verloren gehen, die Breite unten ist daher ein Kompromiss beim Speicherverbrauch und keine allgemeingültige OCR-Einstellung:

async function preprocessImage(file) {
  const url = URL.createObjectURL(file)
  try {
    const img = new Image()
    await new Promise((resolve, reject) => {
      img.onload = resolve
      img.onerror = () => reject(new Error('Unable to decode image.'))
      img.src = url
    })
    const canvas = document.createElement('canvas')
    const maxWidth = 1000
    const scale = img.width > maxWidth ? maxWidth / img.width : 1
    canvas.width = Math.max(1, Math.round(img.width * scale))
    canvas.height = Math.max(1, Math.round(img.height * scale))
    const ctx = canvas.getContext('2d')
    if (!ctx) throw new Error('Canvas processing is unavailable.')
    ctx.filter = 'grayscale(100%) contrast(150%)'
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    return await new Promise((resolve, reject) => {
      canvas.toBlob((blob) => {
        if (blob) resolve(blob)
        else reject(new Error('Unable to encode processed image.'))
      }, 'image/png')
    })
  } finally {
    URL.revokeObjectURL(url)
  }
}

async function optimizedOCR(file) {
  const processedImage = await preprocessImage(file)
  return performOCR(processedImage)
}

Speicherverwaltung

Den Lebenszyklus des Workers effizient zu verwalten, ist entscheidend, insbesondere bei der Verarbeitung mehrerer Bilder:

async function batchProcessImages(files) {
  const worker = await Tesseract.createWorker('eng', 1, {
    logger: (msg) => console.log('Worker progress:', msg),
    errorHandler: () => console.error('OCR worker failed.'),
  })
  const results = []

  try {
    for (const file of files) {
      const {
        data: { text },
      } = await worker.recognize(file)
      results.push(text)
    }
  } finally {
    await worker.terminate()
  }

  return results
}

Fehlerbehandlung und Validierung

Eine robuste Fehlerbehandlung ist für ein reibungsloses Nutzererlebnis unerlässlich. Das folgende Beispiel ergänzt eine Validierung von Dateityp und Dateigröße sowie eine saubere Fehlerausgabe:

async function validateAndPerformOCR(file) {
  const MAX_SIZE = 5 * 1024 * 1024 // 5MB
  const SUPPORTED_TYPES = ['image/jpeg', 'image/png', 'image/webp']

  if (!SUPPORTED_TYPES.includes(file.type)) {
    throw new Error('Unsupported file type. Please use JPEG, PNG, or WebP images.')
  }

  if (file.size > MAX_SIZE) {
    throw new Error('File size exceeds 5MB limit.')
  }

  return performOCR(file)
}

Sicherheitsaspekte und bewährte Verfahren

Beachten Sie bei der Umsetzung von OCR im Browser die folgenden Richtlinien:

Informieren Sie Ihre Nutzer darüber, dass die Verarbeitung lokal erfolgt, um den Datenschutz zu gewährleisten.
Validieren Sie Dateitypen und Dateigrößen, um unerwartetes Verhalten zu verhindern.
Überwachen Sie den Speicherverbrauch und räumen Sie Worker-Instanzen ordnungsgemäß auf.
Ziehen Sie progressives Laden für große Bilder in Betracht, um die UI nicht zu blockieren.
Geben Sie während der Verarbeitung klares Feedback in Echtzeit.
Fangen Sie Fehler elegant ab und zeigen Sie nutzerfreundliche Meldungen.

Weitere Initialisierungsoptionen finden Sie in der Tesseract.js-Worker-API, darunter Pfade zu lokal gehosteten Worker-, Core- und Sprachdateien.

Fazit

Tesseract.js v6.0.0 bietet eine leistungsstarke Lösung, um OCR direkt in Webbrowsern umzusetzen, mit verbesserter Performance, robuster Speicherverwaltung und einer vereinfachten API. Wenn Sie die in diesem Leitfaden beschriebenen bewährten Verfahren befolgen, können Sie effiziente, sichere und nutzerfreundliche OCR-Anwendungen entwickeln, die die Privatsphäre der Nutzer wahren und schnelle Ergebnisse liefern.

Wenn Sie eine fortschrittlichere OCR-Lösung mit serverseitiger Verarbeitung und Unterstützung für verschiedene Dokumentformate benötigen, werfen Sie einen Blick auf Transloadits Dokumenten-OCR-Dienst.