【Windows】OCRプログラミング入門講座 – Tesseract.jsでOCR Webアプリプログラミングをはじめてみよう
Tesseract.js(テッセラクト ジェーエス)を使って、OCR(Optical Character Recognition:光学文字認識)ウェブアプリプログラミングを実施してみましょう。
「Tesseract.jsが動かない…?動かし方がわからない…」等とお悩み中の方もいるのではないかと思います。そのため、Tesseract.jsを使うための開発環境の構築と、公開していただいているサンプルコードの実装方法を解説しておきました。
【OCRアプリ開発環境構築 – Windows編】
Tesseract.jsでWeb Appプログラミング入門
Node.js・npm・Visual Studio Code
視聴時間:5分21秒
「Tesseract.js v2」(Tesseract OCR v4に対応)をnpm経由で読み込む方法(npm:node package manager – Node.jsの管理システム)で、OCR(Optical Character Recognition:光学文字認識)ウェブアプリケーションプログラミングをするための開発環境の準備方法のチュートリアル動画を作成してみました。
【開発環境の準備】
①コードエディターの準備:VSCode
マイクロソフト社が開発したテキストエディターの「Visual Studio Code」(VSCode)を使います。開発環境内でターミナルが使えるので各種管理が楽です。上記の動画では、Mac環境でVSCodeの開き方や日本語化、Node.js・npmのバージョン確認までを解説します。
②Node.jsのインストール
「Node.js」をインストールすると「npm」もインストールされます。インストールする方法は、様々な方法があるようですが、公式サイトのインストーラーを使えば簡単に出来ました。
【OCRアプリ開発サンプルコード – Windows編】
Tesseract.jsでWeb Appプログラミング入門
npm経由:basic・demo・download-pdf
視聴時間:8分34秒
「Tesseract.js v2」(Tesseract OCR v4に対応)をnpm経由で読み込む方法(npm:node package manager – Node.jsの管理システム)で、OCR(Optical Character Recognition:光学文字認識)ウェブアプリケーションプログラミングを実装するためのチュートリアル動画を作成してみました。
今回は、GitHubに公開していただいているOCRウェブアプリケーションプログラミング用Tesseract.jsのサンプルコード
naptha/tesseract.js:tesseract.js-master
:https://github.com/naptha/tesseract.js?ref=devawesome.io
* サンプルコードの使い方は動画を参照ください。
を、npm経由でtesseract.js@v2.0.0-beta.2を読み込む方法等で、examplesの「basic.html」「demo.html」「download-pdf.html」を動かす方法を解説しています。
【開発環境】
・Visual Studio Code(VSCode)
【バージョンの情報】
・Node.jsのバージョン:v12.13.0
・npmのバージョン:6.12.0
・Tesseractのバージョン:tesseract.js@v2.0.0-beta.2
【上記の動画でサンプルコードの実行状況】
・basic.html:英語・日本語のOCR成功(コンソールに出力)。
・demo.html:npm経由でtesseract.js@v2.0.0-beta.2を読み込む場合は「undefined」が出力されてしまう。CDN経由で、tesseract.js1.0.10を読み込む方法では、英語のOCRは成功しました。日本語のOCR精度は低そうです。
・download-pdf.html:英語・日本語のOCR成功(テキスト表示・文字をコピー出来るPDF化)。
各種バージョンによって、エラーが出る可能性があるようです。macOS Catalinaに比べて、Windows 10は比較的スムーズに出来ましたがサンプルコードを動かすだけでも大変な思いをされている方もいるのかもしれませんね。