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

JavaScript




概要

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

オフィシャル

Tesseract.js | Pure Javascript OCR for 62 Languages!

実装

imageDataオブジェクト

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

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

DEMO


外部ウィンドウで開く