Pythonで文字認識といえばTesseractですが、JavaScriptでもTesseract.jsを使うことで文字認識を行うことができます。
Tesseract.jsは自身で学習モデルを用意する必要がなく、既に用意された学習データを使用することができるので、とても簡単に導入することができます。（言語による正解率の違いはありますが）
この記事では、Tesseract.jsを使ったブラウザでの簡単な文字認識の方法について解説します。
準備
まずは、画像を読み込んで文字認識を行なった結果を表示する領域をHTMLで作成します。
ついでに、少し見栄えを整えるためにスタイルも指定していきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE> <html lang="ja"> <head> <title>文字認識</title> <link rel="stylesheet" href="style.css"> </head> <body> <input type="file" id="input"> <img id="image"> <div id="res" /> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#image { max-width: 90vw; max-height: 60vh; display: block; margin-top: 5vh; } #res { width: 90vw; height: 20vh; margin-top: 5vh; border: solid 2px black; padding: 10px; } |
ブラウザで確認して以下のようになっていればOKです。
続いて、ボタンクリックでファイルを選択して、画像を表示する仕組みをJavaScriptで記述していきます。
ここでは、DOM動作を簡単にするためにjQueryを使用しています。
|
1 2 3 4 5 6 7 8 9 10 11 |
$(() => { $('#input').on("change", e => { let file = e.target.files[0]; let img = $('#image'); let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function() { img.attr("src", reader.result); }; }); }); |
このindex.jsをindex.htmlの</body>の直前で読み込むようにします。
その時、jQueryをindex.jsの前に読み込むようにしてください。
|
1 2 |
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="index.js"></script> |
ブラウザで再度確認して、ボタン押下でファイル選択したら画像が表示されるようになればOKです。
Tesseract.jsを使った文字認識
さて、ここから本題で、Tesseract.jsを使った文字認識を行なっていきます。
Tesseract.jsの導入
Tesseract.jsを導入するにはいくつか方法がありますが、ここではCDNを使用します。
Tesseract.jsをindex.jsより前に読み込むようにします。
|
1 |
<script src="https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js"></script> |
これだけでTesseractオブジェクトを使用できるようになるので、以下でTesseractオブジェクトを使って画像認識を行います。
文字認識を行う
続いて画像から文字認識を行います。
画像のソースを引数に持つ関数を作成し、その中で文字認識を行う処理を記述していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let recog = src => { $('#res').text("Please Wait."); Tesseract.recognize(src) .progress(() => { $('#res').text($('#res').text() + " ."); }) .catch(err => { $('#res').text(err); }) .then(res => { $('#res').html(res.text.replace('\n', '<br />')); }); }; |
Tesseract.recognize関数に画像のソースを渡して、thenで処理が終了したら認識結果を受け取ることができます。
progressやcatchはなくても良いですが、あったほうがわかりやすいのでここでは記述しています。
recognize関数の第二引数に{lang: “jpn”}とすることで日本語の認識も行うことが可能です。（デフォルトでは英語）
上記の関数を、画像読み込み完了時に呼び出します。
|
1 2 3 4 |
reader.onload = function() { img.attr("src", reader.result); recog(img.attr("src")); }; |
ネットで拾った適当な手書き風英語の画像を読み込ませてみると、以下のようになりました。
画像が小さいものだと若干のミスはあるっぽいですが、まあまあの精度かなと思います。
日本語だともう少し精度は落ちるようですが、大きめの画像であれば割と良い精度で認識してくれます。
注意すること
Tesseractはほぼ自動で文字認識をしてくれますが、ローカルでのサーバなし環境では正常に動作しないので注意が必要です。
ローカルで確認する場合にはapacheやnodeなどのサーバ環境下で確認をするようにしてください。
終わりに
Tesseract.jsを使ったブラウザでの簡単な文字認識の方法について解説を行いました。
多少の認識精度の問題はありますが、上手く使えば実用レベルで扱うこともできるかもしれませんね。
