東京在住のSIerです。趣味でもITに関することをいろいろとやっていますので、ノウハウなどの備忘録を掲載していきたいと思います。管理人Tesseract.jsを使ってブラウザだけでOCRする方法TweetWebサイトでOCRを実装する場合、サーバサイドかスマホ端末のブラウザ側で処理するかの2種類の方法があります。ブラウザ側で処理する場合はスマホやPCなどの端末側で処理してくれるため、サーバ側のリソースが不要なメリットがあります。ブラウザ側でOCR処理するOSSライブラリは「Tesseract.js」一択になると思いますが、ここでは、Tesseract.jsの使い方やチューニング方法、認識精度などを紹介したいと思います。Tesseract.jsについてTesseractはOSSの光学文字認識エンジンでApacheライセンス2.0で配布されています。v4.0からはLSTMベースのニューラルネットワーク認識エンジンが実装されています。Tesseract.jsはTesseractをJavascriptに移植したものになります。v4.0に対応しています。ここではTesseract.jsのv2を前提に記載しています。公式ドキュメントはここを参照。Tesseract.jsのインストールCDNの場合は以下のように参照します。src='https://unpkg.com/tesseract.js@v2.0.0-alpha.13/dist/tesseract.min.js'></script>webpackを使う場合は以下のコマンドでインストールします。@nextを付けないとv1になってしまうため注意しましょう。サンプルコードサンプルコードは以下のようになります。(importはwebpackでの前提で書いているため、CDNの場合は不要です)意外とシンプルにOCR処理を行うことが出来ます。recognizerecognize関数はOCR解析を実行します。引数には対象の画像を指定します。canvasタグのエレメントをそのまま指定できます。他にもFileオブジェクト、Blobオブジェクト、画像のURL、Base64エンコードされたイメージファイルを指定することもできます。第二引数には言語を指定します。英語の場合は’eng’、日本語の場合は’jpn’を指定します。第三引数は任意にオプションを指定できます。オプションの詳細はここを参照。使いそうなのは以下になります。・tessedit_pageseg_mode・・・ページ区切りモードを指定。progress解析の進行の各フェーズで呼ばれるコールバック関数を設定できます。進行状況が知りたい場合は、ここでconsoleログを出しておいてもよいかと思います。thenthenで解析完了後に実行するコールバック関数を設定します。実際にTesseract.jsを使ったサンプルページを作りましたので、こちらでカメラまたはファイルから画像を読み込みOCRをかけることができます。認識精度はサンプルページで試してみると分かるかと思います。⇒OCRサンプルページいくつか試した結果も以下にまとめますが、日本語は精度が悪く、英語は解像度がよければ制度はそれなりに良かったです。単純な複数行の数字の羅列を試してみましたが、解像度が高ければ問題なく認識しました。ちなみに、日本語にすると認識率が悪くなりました。表の中にある数字についても、pagesegモードによっては認識してくれます。英語の精度は上々です。日本語の文章を試してみましたが、誤った認識をしやすいため要注意です。■結果(日本語、RAW_LINEで実行)これはサンプ丿レ電文です。コメントをキャンセルメールアドレスが公開されることはありません。