フロントエンド開発Blog

オレには鈍器がある

JavaScript , OCR , canvas , ocrad.js

githubにもコード一式置きました。

今回はjQueryを使わずにES6で書いてみました。chromeであれば特にトランスパイラも必要なく動くかと思います。いやーしかしjQueryがなくてもここまで苦労しなくなるとは・・・以前はquerySelectorなんてメソッドなかったような・・・昔を思い出してほろりと涙がでそうでした。

使い方は単純に

  1. 画像をドラッグアンドドロップ
  2. 画像がcanvas上に表示されるので拡大縮小したり、「トリミングモードにする」をクリックしてcanvas上でトリミング
  3. 「画像文字を文字に変換」をクリック

ocrad.jsの特性上、英数字しか対応していません。また、精度もまぁそれなりです。とはいえJSだけでOCRができるとは・・・未来のことかと思いきやNOWなできごとなんですね。おじさんびっくりしちゃった。

ちなみに綺麗に動作させるためには画像自体がそれなりの大きさで、背景などがごちゃごちゃしていない画像が良いです。透過画像にも対応していないようですので注意が必要そうです。手元によさげな画像がない場合は以下をお使いください。

ページトップへ

関連ページ

ページトップへ