画像からテキストを抽出する（OCR)

親戚の住所リストが欲しかったので親に聞いてみたら年賀状で送られてきたのでテキストじゃなくて「これいちいちタイプするの？」っていうところから自動でやってくれないかなと思い立って調べてみました

GoogleDriveでテキスト抽出

GoogleDriveに画像ファイルを入れてGoogleDocsで開くと画像とテキストが表示されます

なんて簡単なんだ。。。

参考

意外と知られていない「Googleドライブ」OCR機能で文字起こし検証→かなり使えそうでしたのでご紹介 - ウェブ企画ラボ

webkikaku.co.jp

GoogleKeepでテキスト抽出

GoogleKeep使ってなかったのでやってみるために落としました

参考

Google Keepでいつの間にか日本語のOCRもできるようになってた！ - 情報管理LOG

hokoxjouhou.blog105.fc2.com

さすがGoogleって感じでしょうか

GASでOCR

GAS(Google Drive API)で画像ファイルを作成

API経由で画像を保存するさいにオプションでorc: trueをつけるだけ

ocrLanguage: 'ja'はBCP47Codeに沿った記述であれば良いようです

ja-JPとか

実装

とりあえずドキュメントのコードを貼り付けて試してみました

code.js

var exports = exports || {};
var module = module || { exports: exports };
function processForm(formObject) {
    var formBlob = formObject.myFile;
    var parentDirId = "xxxxx";
    var resource = {
        title: 'hoge',
        mimeType: 'image/jpg' // ファイルのMIMEタイプ
    };
    var optionalArgs = {
        ocr: true
    };
    try {
        var file = Drive.Files.insert(resource, formBlob, optionalArgs);
    }
    catch (e) {
        Logger.log(e);
    }
    var doc = DocumentApp.openById(file.id);
    var text = doc.getBody().getText();
    return text;
}
function doGet(e) {
    return HtmlService.createTemplateFromFile("index").evaluate();
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      // Prevent forms from submitting.
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);

      function handleFormSubmit(formObject) {
        google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
      }
      function updateUrl(text) {
        var div = document.getElementById('output');
        div.innerHTML = text;
      }
    </script>
  </head>
  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <input name="myFile" type="file" />
      <input type="submit" value="Submit" />
    </form>
    <div id="output"></div>
 </body>
</html>

Deploy as weba appでHTMLページからOCRしたい画像を上げるとその中身のテキストを表示できるようになりました

f:id:swfz:20190317234826p:plain