新規投稿
フォローする

Tesseract.jsを使ってOCR

OCR(光学的文字認識)は、画像などに含まれた文字をテキストデータとして読み取る技術です。 Tesseract.jsを使うとブラウザ上で簡単にOCRを実装できます。

サンプル

添付ファイル内の文字を文字列フィールドに保存します。

フォーム設定

コード

tesseract.jsを読み込み後、下記sample.jsを読み込みます。

・sample.js

(function() {
  "use strict";
  kintone.events.on(['app.record.create.show','app.record.edit.show'], function(event){
    document.addEventListener('change', function(e){
      if(e.target.type !== 'file') return;
      if(!e.target.files[0].type.match('image.*')) return;
      var reader = new FileReader();
      reader.addEventListener('load', function(){
        Tesseract.recognize(reader.result, {lang:"jpn"}).progress(function(p){
          event.record.文字列.value = p.status + ' : ' + Math.round(p.progress*100) + '%';
          kintone.app.record.set(event);
        }).then(function(result){
          event.record.文字列.value = result.text;
          kintone.app.record.set(event);
        });
      });
      reader.readAsDataURL(e.target.files[0]);
    }, true);
  });
})();

※文字認識の精度は、文字サイズや画質に依存します。

7

4件のコメント

Avatar
mionix

初歩的な質問で大変申し訳ないのですが、

tesseract.jsはどのように読み込みすればよいのでしょうか。

ご教示頂ければ幸いです。

1
Avatar
江田篤史

mionixさん

お世話になっております。
コメントありがとうございます。

記事サンプルでは下記を読み込んでおりました。
https://cdn.rawgit.com/naptha/tesseract.js/1.0.7/dist/tesseract.js

下記リンクに公式CDNが示されていたので、そちらでも良いかもしれません。
https://github.com/naptha/tesseract.js#cdn

0
Avatar
mionix

江田様

ご教示頂きありがとうございます。

無事正常に動作致しました。

0
Avatar
Hiro

江田様

お世話になっております。

このコード参考にさせて頂いております。

一つご教授頂きたいことがあり、指定した添付ファイルフィールドのファイルを読み取るにはどのようにすれば

いいでしょうか?

 

0
サインインしてコメントを残してください。