【React】画像からテキストを取得するライブラリ「tesseract.js」

今回は、画像ファイルからテキストを取得する方法についてです。
「tesseract.js」というライブラリで、初めて導入したのですが、思ったよりも素早く画像からテキストを取得できました。

ライブラリの GitHub のページはこちらから。

naptha/tesseract.js: Pure Javascript OCR for more than 100 Languages 📖🎉🖥
https://github.com/naptha/tesseract.js

ただし、そこまで高精度ではないので、時々間違ったテキストに変換される事があります。
こちらの変換機能に完全に頼るのではなく、補助的に使うのが良いみたいなので、その点だけご注意ください。

 

インストールは、下記のコマンドを実行するだけです。

npm install --save tesseract.js

サンプルコードは下記のとおりです。

import Tesseract from 'tesseract.js';

Tesseract.recognize(
  [画像パス or base64 データ],
  'eng+jpn',
  { logger: m => console.log(m) }
).then(({ data: { text } }) => {
  console.log(text);
});

上記のコードでは、指定した画像ファイルから日本語または英語のテキストを取得できます。
5行目にあるように、言語を + でつなげることで、複数言語の読み取りに対応できます。

導入した感想ですが…とにかくとても簡単でした！
また、base64 にも対応しているので、読み込む画像を指定するのも難しくなかったです。
使用可能な画像フォーマットについては、こちらから確認できます。

https://github.com/naptha/tesseract.js/blob/master/docs/image-format.md

実際に使ってはいないのですが、<input> から読み込んだファイルもOKみたいです。

 

以上、React で画像からテキストを取得できるライブラリ「tesseract.js」のご紹介でした。
ご参考になれば幸いです。