Androidのカメラで撮影したレシートの画像から文字を抜き出してみる

Androidで撮った画像データから文字列を抜き出して、web上に表示するところまでをJavascriptで実装してみました。
画像分析にはGoogle Cloud Vision APIを利用しています。

経緯

• とある理由によりレシートに印字された文字をスマートフォンで入力したい。
• 手入力大変。
• 画像の文字を認識できるアプリを使ってコピペを企んだがどれも多機能だった。
  変にズームとかしなくていいから！
  共有メニューとか出さなくていいから！
  自動保存もいらないから！
• あれ、Javascriptで実現できるんじゃ・・・？

さっそく実装

動作環境はWindowsとAndroidのChrome。
Android標準ブラウザは動作しません。
Google CloudでVision APIのキーを別途取得している必要があります。
{API_KEY} のところにVision APIのキーが入ります。
Vision APIは制限を超えると有料になるので注意が必要です。

結果

上のコードを適当なサーバーに設置しAndroidから画像を選択してみました。

(実際はレシートの画像横向きでしたが、見難かったので90度回転させています)

問題なく文字列を認識しています。

「きりとり」の辺りが怪しいですが、必要のない箇所なので問題ありません。

これで画像からテキストをコピペし放題です。

余計な機能は何もありません。

Javascriptで実装する必要性は皆無ですが、強いて利点を挙げればマルチプラットフォームぅ・・・ですかね・・・。

少しの手間で快適さがプラスされたので満足です。

Tweet