はじめに

商品画像や管理画面のスクリーンショットから文字を取り出すために、オンラインOCRを使うことがあります。ただ、請求書や契約書まで外部サーバーへ送るのは少し気になります。

そこで、PP-OCRv6をブラウザ内で動かし、元画像と認識結果をアップロードしないOCRを実装しました。この記事では、UIの紹介よりも、ブラウザ内で動かすために分けた処理と、実装時に困った点をまとめます。

OCR処理は専用Workerへ分離

認識処理をメインスレッドで実行すると、モデルの初期化や推論中に画面操作が重くなります。そのため、モデルの読み込み、画像の前処理、推論、後処理を専用のWeb Workerへ移しました。

メインスレッドが担当するのは、画像選択、進捗表示、結果編集、エクスポートです。Workerとの間では、画像データと認識結果だけを受け渡します。

モデルは初回使用時にダウンロードし、その後はブラウザキャッシュを利用します。OCR処理中に画像や認識文字列をアプリケーションサーバーへ送る処理はありません。

最初は精度を優先して大きなモデルだけを使おうとしました。しかし、スマートフォンで約138.8MBのモデルを読み込むのは現実的ではありません。

現在は用途別に3つ用意しています。

常に最大モデルを使うのではなく、画像と端末に合わせて選べるようにしました。スマートフォンでは高速または標準を基本にしています。

OCRの出力を一つの文字列にすると、表や管理画面の列構造が失われます。そこで、各行の座標、信頼度、読み順、簡単な表構造を保持するようにしました。

表として判断できた結果はタブ区切りでコピーできます。Excelやスプレッドシートへ貼り付けたときに列が分かれるので、OCR後の手作業を少し減らせます。TXT、Markdown、JSONへの書き出しにも対応しました。

現在のモデルは、中国語、英語、日本語、ドイツ語、スペイン語、ポルトガル語、フランス語を対象にしています。韓国語にはまだ対応していません。

スキャン画像向けの軽い補正は入れていますが、強い二値化は使っていません。スクリーンショットの細い文字が欠けることがあったためです。ここは画像の種類を見て補正方法を切り替える余地があります。

ブラウザ内OCRで難しかったのは、単にモデルを動かすことより、端末ごとのメモリ差と、認識後のレイアウトをどう残すかでした。

実際の動作は以下で確認できます。無料・登録不要です。

同じサイトで画像変換・圧縮、GIF/APNG編集、動画の背景除去も提供しています。ブラウザで処理できる一般的なファイルは、端末内で完結する設計にしています。