見出し画像

MonacaでOCR機能を実装する #柏の葉高校

千葉県立柏の葉高等学校 情報理数科

1．概要

Monaca Educationに，JavascriptのライブラリであるTesseract.js,Cropper.jsを用いてOCR機能を実装する方法について紹介します。

2．OCRとは


OCRとはスマホのカメラなどで取り込んだ画像データを解読して，文字データに変換する技術です。

3．利用している技術，ライブラリ

• Monaca Education
• Tesseract.js v1.0.10
• Cropper.js v1.5.12


4．OCR機能の説明と使い方

まず最初にTesseract.jsを使ってOCR機能を実装します。

基本画面
下記の画像は，iPhoneでMonaca EducationのデバッカーアプリケーションであるMonaca for Studyを開いて動作確認をしている画面です。

①メニューから画像を取り込みます

図1

 図：Tesseract.jsに画像を取り込む

②テキストボックスに結果が表示されます。

図1

図：Tesseract.jsの実行画面

図1

※OCRで使用したサンプル画

5．ソースコード

下記のソースコードをHTMLファイルの中に記述すればOCR機能を実装することができます。※ソースコードの4行目～7行目の部分をコメントアウト，または削除することを忘れてしまうとこのプログラムを実行したときにエラーが出て正常に動作しなくなってしまうため，注意してください。

<!DOCTYPE HTML>
<html>
<head>
   <!--※正常に動作させるため,必ず<script src="components/loader.js"></script>と<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">をコメントアウトするか削除してください。-->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <link rel="stylesheet" href="components/loader.css">
   <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <!--Tesseract.jsのインストール(CDN)-->
   <script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>
   <div>
   <!--ファイル選択ボタン-->
   <input type="file" id="uploader" value="">
  
</div>
<div>
   <!--進捗状況の表示-->
   進捗: <span id="progress">0</span>%
</div>
<div><br>
   <!--結果を表示するテキストエリア-->
   <textarea id="ocrResult" style="height: 300px;width:300px;"></textarea>
</div>
   <script>
   //recognize関数の宣言
   const recognize = function (evt) {
   //読み込むファイルの宣言
   const files = evt.target.files;
   //ファイルの中身がないときには実行しない
   if (files.length == 0) {
           return;
   }
   //Tesseract.jsの実行
   Tesseract
       //OCR機能を実行する際の読み込むファイルや言語を設定（言語はlang: ''の中身をengやjpnに変更することで英語や日本語にすることが可能です）
       .recognize(files[0], { lang: 'eng', tessedit_pageseg_mode: "RAW_LINE"})
        .progress(function (p) {
           // 進歩状況の表示
           //進捗状況を表示するspanタグを指定
           let progressArea = document.getElementById("progress");
           //spanタグに埋め込む
           progressArea.innerText =  p.status + " " + Math.round(p.progress * 100) + "%";
       })
       .then(function (result) {
           // 結果の表示
           //テキストエリアを指定
           let textarea = document.getElementById("ocrResult");
           //テキストエリアに結果を埋め込む
           textarea.value = result.text;
           });
   }
   //関数宣言終了
    //関数を実行
   //ファイル選択ボタンを指定して宣言
   const elm = document.getElementById('uploader');
   //ファイルの中に写真が追加されたらrecognize関数を実行
   elm.addEventListener('change', recognize);
   </script>
</body>
</html>

写真を選択してOCRし，テキストエリアに文字が表示されたら成功です。

6.トリミング機能の実装

Cropper.jsを使ってトリミング機能を実装し，OCR機能の精度を向上させます。

基本画面
① メニューから画像を取り込む

図1
図：Cropper.jsに画像を取り込む

② Cropper.jsでトリミング画面

図1

図：切り取る範囲を指定する画面

③ 切り取る範囲を指定したら「切り取る」ボタンを押してください。

図1

図：Cropper.jsの実行画面

図1

※上記のOCRで使用したサンプルです。

7．構造について

※トリミング機能を追加するときには下記のファイル・フォルダの階層構造を参考にしながら進めてください。

① github (URL：https://github.com/fengyuanchen/cropperjs)のページに移動し,画面右にある緑色の「code」と書かれているボタンを押します。その後，下に表示された「Download ZIP」と書かれているところをクリックしてZIPファイルをダウンロードしてください。

② ダウンロードしたZIPファイルを解凍してください。

③ Monacaで新しくcropperという名前のフォルダを作ってください。

④ 解凍したもののdocsフォルダ内に移動し，cssフォルダ内cropper.css(ディレクトリ：/docs/css/cropper),jsフォルダ内のcropper.js(ディレクトリ：/docs/js/cropper)をMonacaで作ったcropperフォルダの中にアップロードしてください。

⑤ 次にMonaca上で新しくJavascriptファイルを作ってください。（このJavascriptファイル内にトリミング機能のコードを書きます。ここでは例としてこのファイルをsample.jsとします。）

⑥ HTML側でダウンロードして追加したcropper.cssとcropper.js,作ったJavascriptファイルをlinkタグ，scriptタグで読み込ませてください。

⑦ 新しく作ったJavascriptファイルに下記のソースコードを記述してください。

トリミング機能を追加したときのファイル・フォルダの階層構造は以下のようになっています。

※componentsフォルダなどテンプレートとして最初から追加されているものに関しては一部省略しています。

wwwフォルダ
　　cropperフォルダ
　　　　cropper.cssファイル
　　　　cropper.jsファイル
　　cssフォルダ
　　　　style.cssファイル
　　index.htmlファイル
　　sample.jsファイル

8．ソースコード+α

//使う変数の宣言
let importImage;
let cropperImage;
let cropButton;
let cropper;
let resultImage;
let resultImageURL;
//この画面がロードされたときに実行
window.onload = function() {
   //IDで要素を取得
   importImage = document.getElementById("importImage");
   //importImageの中身が変わったときにupdateImage関数を実行
   importImage.onchange = updateImage;
   //IDで要素を取得
   cropperImage = document.getElementById("cropperImage");
   //cropperImageの部分の設定
   cropper = new Cropper(cropperImage, {
       viewMode: 1
   });
   //IDでボタン要素を取得
   cropButton = document.getElementById("cropButton");
   //cropButtonを押したときにcrop関数を実行
   cropButton.onclick = crop;
   //トリミング結果の埋め込み
   resultImage = document.getElementById("resultImage");
   
}
//以下,使う関数の宣言と設定
//トリミングをする関数
function crop() {
   //crop関数を実行して切り取った画像を取得し,resultImageに埋め込む
   resultImageURL = cropper.getCroppedCanvas().toDataURL();
   //srcの設定
   resultImage.src = resultImageURL;
}
//画像データを埋め込んだり置き換えたりする関数
function updateImage(image){
   //ファイルの読み込み
   const reader = new FileReader();
   reader.onload = function(imageURL) {
       //cropperの中身を置き換える
       cropper.replace(imageURL.target.result);
   }
   if(image.target.files[0]){
       reader.readAsDataURL(image.target.files[0]);
   }
   
}

9.おわりに

OCR機能，トリミング機能を実装することができましたか。JavascriptのライブラリであるTesseract.jsは100以上の言語に対応しているので，OCR機能の言語設定を変えていろんな言語でを試してみると面白いと思います。最後まで読んでくださりありがとうございました。

10.参考にしたサイト

• Tesseract.jsを使ってブラウザだけでOCRする方法
　https://www.mussyu1204.com/wordpress/it/?p=1151

• Tesseract.js https://tesseract.projectnaptha.com/

• Cropper.js https://fengyuanchen.github.io/cropperjs/

みんなにも読んでほしいですか？

オススメした記事はフォロワーのタイムラインに表示されます！