サーバーサイドの魔法なしで、ブラウザに画像からテキストを読み取る方法を教える方法

経費管理のためのWebアプリを構築していて、ユーザーがレシートから手動でデータを入力する必要がある状況を想像してみてください。面倒だし遅い、そして正直に言って時代遅れです。紙を撮影するだけで、データベースに数字を直接入れたいですよね。通常、このようなタスクにはOCRを備えた重いPythonサービスをセットアップするか、リクエストごとにクラウド大手企業に支払います。しかし、よりシンプルで、さらに重要なことに無料の方法があります。

Tesseract.jsの話です。これは伝説的なTesseract OCRエンジンのJavaScript移植版で、ブラウザまたはNode.jsで直接動作します。

このライブラリは一体何なのか

Tesseract.jsは単なるAPIラッパーではありません。開発者は元のC++エンジンを取得し、WebAssemblyにコンパイルして、使いやすいJSライブラリとしてパッケージ化了ました。その結果、クライアント側で動作する本格的なテキスト認識が得られます。

なぜこれが必要なのか？第一にプライバシーです。ユーザーデータはあなたのサーバーに送信されず、すべてローカルで処理されます。第二にインフラコストの節約です。あなたのサーバーは重いパターン認識の計算にリソースを消費しません——この作業はユーザーのプロセッサで行われます。

数分で動かす方法

このライブラリはロシア語を含む100以上の言語をサポートしています。始めるには数行のコードだけで十分です。Node.jsまたはモジュールを使用したブラウザ用の基本的な例です：

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();
})();

複数の写真をバッチ処理する必要がある場合、それぞれにworkerを作成するのは悪い考えです。初期化を1回だけ行って、すべての画像をrecognizeメソッド経由で処理し、その後閉じるべきです。

プレーンテキストの他に何ができるのか

このプロジェクトは単純な文字読み取りをとうに超えています。最近のバージョン（現在のv5とv6）には多くの便利な機能が追加されました。

ライブラリは自動的にテキストの向きを検出します。ユーザーが横向きの写真をアップロードした場合、Tesseract.jsはより良い結果を得るために回転を試みます。中間画像を抽出することすらできます：アルゴリズムが画像を白黒に変換したりノイズを除去した様子を確認できます。

興味深いことに、このプロジェクトはリアルタイムビデオで動作できます。スマートフォンのカメラを価格タグに向けると、スクリプトはストリームから関連のある言葉を即座に「引き出します」。

v5では、開発者はファイルサイズ много работыを行いました。英語のトレーニング済みモデルファイルは54%小さくなり、中国語では完全な73%削減です。Webではすべてのメガバイトが重要なため、これは重要です。

事前に知っておきたいこと

良い面だけではありません。Tesseract.jsは純粋なOCRです。高コントラストの背景上の印刷テキスト 잘 처리하지만、手書きの入力や複雑なデザインには苦労します。

もう一つのニュアンス——PDF。ネイティブライブラリはそれらをサポートしていません。マルチページのドキュメントを解析するタスクがある場合，要么事前に画像に変換するか、Tesseract.jsの機能を拡張しようとして生まれた代替手段であるScribe.jsなどの代替手段を探す必要があります。

WebAssemblyは強力ですが、メモリを消費することも忘れないでください。弱いスマートフォンで開いているタブが dozen 個ある状態で認識を実行すると、ページが単に「クラッシュ」する可能性があります。

どこで使えるか

私の経験では、このようなツールは小さな内部ユーティリティで最も頻繁に活躍します。例えば：

• ドキュメントスキャンからのフォーム自動入力。
• 画面テキスト翻訳ツール（スクリーンショットのキャプチャ）。
• ローカル検索用の画像内のテキストインデックス。

テキスト認識 быстро добавиする必要がある人で、バックエンドを扱いたくない場合、Tesseract.jsは最も明白で実績のあるオプションです。このプロジェクトは生きており積極的にメンテナンスされており、巨大なコミュニティがあるためほとんどの問題は5分でGoogleで見つかります。

公式のデモサイトでライブラリを試すことができます。そこではエンジンがドキュメント構造をどのように「見て」ブロックや言葉に分割するかを明確に確認できます。