More than 3 years have passed since last update.

JavaScriptで現実世界の文字を読み取る方法を調べてみた

Last updated at 2021-06-05Posted at 2021-06-05

機械学習のml5.jsについて学んだので何かを作ろうと思い、普通の温度計のデジタル表示された数字をで読み取るものを作ろうと思い調べました。

#ml5.jsが対応しているモデルから探す

まずは学びたてのml5.jsで探してみますが……うーん、なさげ、でしょうかね……。「OCR」「character」「number」で検索しましたが見つからず。カメラに映った文字を読み取る機能は需要的にもメジャーどころかと思っていたのですが……。

Teachable Machineでそれぞれの体温の写真を撮って学習させればいけるとは思いますが手間がかかりすぎて本末転倒ですし、なにより狙った体温にできたらお前は人間ではない。

#Google先生に訊く

以下のサイトによくまとまっていて助かりました。そこで知ったライブラリについて実装記事などをさらに調べていきます。

デモ用サイトを見る感じなかなかテンションあがる感じです。
「Tesseract.js can run either in a browser and on a server with NodeJS.」とのこと。

ちなみに「人が書いた文字を認識したいときはOCRではなく手書き認識(Hand written recognition)と呼ぶ」という知見を得ました。・・・デジタル表示された数字を読み取りたい場合は？

tessedit_char_whitelist で読み取る文字列をホワイトリストで指定できる

よく缶コーヒーについてる、数字10桁くらいを手入力するのが面倒なので自動化してみた、という実装例です。これは私も面倒で結局応募してないので素敵です。
文字列ホワイトリストに数字をそれぞれ入れれば認識精度上がるかな。

Tesseractの対応形式は広く、Canvas要素をそのまま投入可能なのも便利なところです。

色々試されています。今回のサンプルコードに使わせてさせていただきます。(- -)(_ _)ペコリ

有料。

#まとめ
評判と実装例の情報量からtesseract.jsを試してみましょう。