コラボフロー Advent Calendar 2022 ３日目の記事です！
地球防衛軍6というゲームにハマっているmikoです。
INFERNO（最高難易度）は地獄…。
ふと「OCRを利用して申請書への入力の手間を省けないか？」と思ったので、
JavaScriptライブラリを利用しつつ、挑戦し始めた人間の話（序章）です。
Tesseract.js
今回利用するのは、JavaScriptでOCRライブラリといえばこれ！
「Tesseract.js」です！
英語、日本語に限らず100以上の言語に対応している化け物みたいなライブラリです。
早速、コラボフローで試してみた
まずはOCR対象となる画像を画像パーツへアップロードし、
右下にある「Let's OCR!!!☺」をクリックすると、
読み取り結果にOCR結果が出力される簡単なカスタマイズを試してみました。
申請フォーム
フォームは以下の通りです。
ラベルパーツには以下のHTMLがセットされています。
<a href="javascript:void(0)" onclick="letsOCR();return false;">Let's OCR!!!☺</a>
JavaScript
'use strict';
// OCR結果の出力対象となるテキストエリアパーツのfid
const outputTextFid = 'fidTextArea';
// OCR対象となる画像パーツのfid
const ocrTargetFid = 'fidImage';
function letsOCR() {
const attachContent = document.querySelector(`input[name="${ocrTargetFid}"]`);
const fileId = attachContent.value.split('|')[1];
let url = `${collaboflow.page.api_endpoint}/v1/files/${fileId}/download`;
Tesseract.recognize(
url,
'jpn',
{ logger: m => console.log(m) }
).then(({ data: { text } }) => {
document.getElementById(outputTextFid).value = text;
});
}
OCR - 例１
まずは、弊社のHPの一部を読み取ってみて、
文字認識してみました。
読み取り画像
読み取るのは以下の画像です。
読み取り結果
申 請 ・ 承 認 業 務 を デ ジ タ ル 化
直 感 的 な 操 作 性 で 使 い 手 を 選 ば な い
筆 単 ク ラ ウ ド ワ ー ク フ ロ ー
C CcollaboflouQ0 コ ラ ボ っ ロ -
少し違う部分がありますが、
ほぼ画像通りの文字が出力されました。
（´-`）.｡oO（コラボっロって何かかわいいな…
OCR - 例２
次は文章のくだらなさが気に入っていて、お気に入り登録までしている
開発者ブログの記事から一部抜粋してきました。
OCRの結果が出るの早いなーって思っていたけど、
ん？？？
(;つД⊂)ｺﾞｼｺﾞｼ
何かおかしい文字が見えたような・・・？
怨年会ってなにそれ怖い・・・
年末にやるもんじゃない・・・
読み取り結果
読み取り結果の全文です。
こ ん に ち は 。 こ の 時 期 は も っ 鍋 と ピ ー ル が し く な る コ ニ ー こ と 小 西 で む 。
昂 い も の で 気 づ け ば ぼ も う ⑫ 月 も 半 ば 、、、 怨 年 会 シ ー ズ ン 真 っ 只 中 で す ね !
私 も つ い 昨 日 忌 年 会 が あ り ま し て 、 二 日 酔 い と 闔 い つ つ ブ ロ グ を 書 い て お り ま す ( 沙 )
二 目 酔 い に 効 く も の と し て よ く 耳 に す る の ほ は シ ジ ミ で す が 、 実 は ト マ ト も 効 く ら し い で す !
ま る か じ り で も い い で す が 、 ト マ ト ジ ュ ー ス だ と 効 果 は 信 増 ①
さ ら に お 江 を 飲 む 時 に 一 繍 に 飲 む と 、 凶 中 の ア ル コ ー ル 濃 度 が ③ 副 低 下 し 、 体 内 か ら の ア ル コ ー ル 消 失 も ⑤0 分 早 ま る と い う
研 究 結 果 あ る よ う で す 。
な る ほ ど 。 。 。 だ か ら レ ッ ド ア イ は 酔 い に く い の か 。 。 。 ( 私 だ け ? )
ま ぁ 何 は と も あ れ 二 日 酔 い に な ら な い 事 が 一 番 な の で 、 お 江 は ほ ど ほ ど に 制 限 し な い と で す ね 。 。 。
ー 前 限 ②
副 陽 ・・・ 割 限 ・・・ は っ ⑲
コ ラ ボ フ ロ ー に ア ク セ ス 刊 風 の 機 膨 が 実 裕 さ れ ま し た ! ( 笑 )
文字が小さい＆細いと認識率がそこそこ下がりました。
OCRの前に
- 画像を大きくする
- 文字を太くする
これが次の課題になりそうです。
さて、３日目が空いていたので何となく始めて見ましたが、
作り込めば何かに使えるのかも？と思いました。
Excel添付取込パーツの画像・PDF版みたいなのが作れちゃう・・・？？
何か進展や要望があれば続編を書こうかと思います✋