添付した画像を非同期でプレビュー表示し、OCRで文字を取得する

はじめに

こちらは以前のOCRの記事の関連になります。
OutsystemsのGoogle Cloud Vision OCRを使ってみた

想定読者

・画像のプレビュ－を非同期で行いたい
・非同期でOCRを行いたい

事前準備

■Forgeから下記モジュールをDL

・OCR
https://www.outsystems.com/forge/component-overview/1572/googlecloudvisionocr

・File Upload And Image Preview
https://www.outsystems.com/forge/component-overview/3717/file-upload-and-image-preview-on-choosefile

■Google Vision APIのAPIキーを取得

実装

1.画像アップローダーと、File Upload And Image PreviewのWebblockを配置

このタイミングでアップロードした時点で画面での確認が可能になります。

WebbloclkのNotifyアクションがはしります。

2.アップロードしたデータをJsonDeserializeしてStructureに格納

3.Structureに格納したデータをOCRの下記処理にかけます

4.OCR処理にかけた後、取得したTextをSplitします。

そして正規表現にて画像内で欲しい部分の条件を組み、取得します。

5.最後にAjaxRefreshをかけて完了

終わりに

実際に数をこなしてみると、OCRの成功率はそこまで高くなく残念な結果となりましたが、
逆に精度が上がれば使えるかなという印象です。
この実装の仕方で合っているかもわからないですが、誰かのお役に立てれば幸いです。