tesseract.js + canvasを組み合わせてOCRを行う

目次

1. 概要
2. 実装

概要

tesseract.jsはWebブラウザで動くOCRエンジンです。オフィシャルサイトからデモをみることができると思います。 フロントのjsで動かす場合、canvasと組み合わせると色々と都合が良いので、とりあえず組み合わせたシンプルなデモを作った。

オフィシャル

http://tesseract.projectnaptha.com/

実装

imageDataオブジェクト

imageDataオブジェクトはcanvasで画像を利用する際に利用されるオブジェクトです。 またプロパティである、imageData.dataは縦x横x画像値(4)の配列です。 TesseractにはこのimageDataを渡すことができます。

他にもimageやfileオブジェクトなどをそのまま渡すことができます。

DEMO

外部ウィンドウで開く