Tesseract.js インストールからテストまで(10/18 改訂版)

現在学校の授業の一環としてOCRを触っているところなのだけども、

HTMLで組み込めないかな～といろいろ調べていたところ、Tesseract.jsというものが見つかった。

元はヒューレット・パッカードが開発し、Googleに移行し、現在はGit上で提供してされているオープンソースのTesseract-ocr。

これを、有志の手によってJavascript化されたという画期的なJavascript。なんですが、導入がかなり雑(npmで手に入るTesseract.jsのreadmeが『# tesseract.js』一文のみ、exampleも自分の環境下では動作しない)なので

Readmeやexampleもちゃんと動作するようになりました。

色々試してみたところ一応動作するようになったので後に使う人のために残しておく。

npmを導入済みなら

npm install tesseract.js --save

を叩き、JavaScript上で

var Tesseract = require('tesseract.js')

か

import Tesseract from 'tesseract.js'

を記述するだけ。npmまだ入れてないならここが詳しく説明してる。

現バージョン(10/18時点)だとnode v6.8.0以上が必要。

<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.8/dist/tesseract.js'></script>

をhtmlのヘッダに記述するだけ。

どちらともインストールはすごく単純明快。

以前は『Go Kevin!』と書かれほぼ投げやりのようにしか思えなかった説明も、現在ではgithub上で非常に詳しく説明が記載されるようになったのでその点も踏まえて。

原文はこちら。

.recognize(imageData,[language])でOCRを掛ける。
.detectでOCR対象の画像情報を取得する(但し数字列だけ表示される)。(今使えない?)
.progressに引数付のfunctionを指定することで進行状況が確認できる。
以前はnew Image();が必要だったがImage情報に該当するものならなんでも読み取れるようになった(ex.canvas内でのレンダリング, video, File API, 絶対パスetc...)
recognizeでOCRを掛けた結果は.thenで受け取り、引数付のfunctionで中身をいじれる。読み取った中身はObjectで構成されてるので単純にテキストだけ取りたいなら引数.text[]でまわしてあげると中身が取れる。

たぶんTypeError吐かれることもありますが無視して構いません。

以下ただTesseract.jsを試したい人のための簡易的な方法。

対象の画像はサーバーに置いてあるtest.pngとする。

Tesseract.recognize("./test.png",{ lang:"jpn" })

.then(function(e){ console.log(e) })

これでTesseract.jsが動作する。

それでは軽く動作確認。今回ははてなブログの公式Twitterの紹介をTesseract.jsに掛けてみる。

f:id:PgJis:20160930140018j:plain

結果は以下のとおり。

f:id:PgJis:20160930141053j:plain

うーん...(^_^;

ついでに英語もやってみよう。対象はgitのオフィシャルサイトのトップページから。

f:id:PgJis:20160930141529j:plain

結果は以下の通り。

f:id:PgJis:20160930141947j:plain

１行目のcontrolがoontrolになったりsystemがsystenになったりと細かいミスがあるけれども大体いい感じに認識されてる。

うーん、日本語の認識率が極端に悪いのは痛い(^^;;

ということでTesseract.jsの導入からテストまででした。

プログラマー見習いの、Jis。