Tesseract-OCRの使い方を教えてください

Tesseract-OCRを利用しようとしているのですがうまくいきません

<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>
<script>
// ユーザ指定のファイルを読み込み、画像認識の関数を呼び出す。
function read_in() {
 var reader = new FileReader();
 reader.onload = function (e) {
   //選択された画像をimg要素として表示する。
   document.getElementById("read_image").src = e.target.result;
   //画像認識を行う
   recognize_image();
 }
 // 画像ファイルをdata URLとして読み込むように指示しておく。
 reader.readAsDataURL(document.getElementById("input_image_file").files[0]);
}
// 画像認識を行う。
function recognize_image() {
 //結果出力先の要素を取得する。
 var txt_out = document.getElementById("text_of_read_image");
 //複数回、連続して実行するときのために、最初に中身を捨てる。
 txt_out.innerHTML = "";
 //指定された言語のコードを取得する。
 var lang_list = document.getElementById("lang_options");
 var selected_lang = lang_list.options[lang_list.selectedIndex].value;
 console.log(selected_lang + "が選択されました。");
 
 document.getElementById("msg").textContent = "[処理を開始しました。]\n";
 //画像認識
 Tesseract.recognize(
   document.getElementById("read_image").src,
   {
     lang: selected_lang
   })
 .progress(function(m) {
   document.getElementById("msg").textContent += "▶︎ ";
   //console.log("途中経過: " + m + "\n");
 })
 .catch(function(e) {
   document.getElementById("msg").textContent += "[エラーです: " + e + "]";
   console.log("エラーです: " + e);
 })
 .then(function(result) {
   txt_out.innerHTML = result.text;
 })
 .finally(function(r) {
   document.getElementById("msg").textContent += "[処理が終わりました]\n";
 });
}
</script>
</head>

umyu

2018/09/08 04:34 編集

使用しているブラウザとどのように動かしているのかを追記してくださいな。

programming

2018/09/08 14:29

投稿の削除ポリシー: https://teratail.com/help/delete-policy また、編集履歴から編集前の状態もわかります: https://teratail.com/questions/history-questions/144814

行動規範の内容に同意します

回答2件

ベストアンサー

ブラウザのアドレスがfileになっていませんか？
httpサーバーを立ち上げて、localhostでアクセスしてみてくださいな。

参考:Current CDN Example Not Working

質問文のコードはmsgが定義されていなかったので、その点を追加し
あとprogressを以下のようにConsoleに出力するように変更しました。

JavaScript
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<base target="_top">
6<title>Tesseract.js</title>
7<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>
8<script>
9// ユーザ指定のファイルを読み込み、画像認識の関数を呼び出す。
10function read_in() {
11  const reader = new FileReader();
12  reader.onload = (e) => {
13    //選択された画像をimg要素として表示する。
14    document.getElementById("read_image").src = e.target.result;
15    //画像認識を行う
16    recognize_image();
17  }
18  // 画像ファイルをdata URLとして読み込むように指示しておく。
19  reader.readAsDataURL(document.getElementById("input_image_file").files[0]);
20}
21
22
23// 画像認識を行う。
24function recognize_image() {
25  //結果出力先の要素を取得する。
26  const txt_out = document.getElementById("text_of_read_image");
27  //複数回、連続して実行するときのために、最初に中身を捨てる。
28  txt_out.innerHTML = "";
29  //指定された言語のコードを取得する。
30  const lang_list = document.getElementById("lang_options");
31  const selected_lang = lang_list.options[lang_list.selectedIndex].value;
32  console.log(selected_lang + "が選択されました。");
33  const msg = document.getElementById("msg");
34  msg.textContent = "[処理を開始しました。]\n";
35
36  //画像認識
37  Tesseract.recognize(
38    document.getElementById("read_image").src,
39    { 
40      lang: selected_lang
41    })
42  .progress(message => { console.log('progress is: ', message); })
43  .catch(e => {
44    msg.textContent += "[エラーです: " + e + "]";
45    console.log("エラーです: " + e);
46  })
47  .then(result =>{
48    txt_out.innerHTML = result.text;
49  })
50  .finally(r => {
51    msg.textContent += "[処理が終わりました]\n";
52  });
53}
54
55</script>
56</head>
57<body class="main-text-only">
58<form name="f">
59
60<ol>
61<li>言語を指定し (
62<select name="lang_options" id="lang_options">
63<option value="eng">English</option>
64<option value="jpn" selected>Japanese</option>
65<option value="kor">Korean</option>
66</select>
67)、
68</li>
69
70<li>
71画像ファイルを選択し
72(<input type="file" id="input_image_file" name="input_image_file" />)、
73</li>
74
75<li>
76そのファイルを
77<input type="button" value="読み込んで" onclick="read_in()">
78ください。
79</li>
80</ol>
81</form>
82
83<table style="margin: auto;">
84<tr><th>認識対象画像</th><th>読み取り結果</th></tr>
85<tr>
86<td style="overflow: auto;"><img id="read_image" style="max-width: 450px; max-height: 450px;" /></td>
87<td id="text_of_read_image" style="white-space: pre; font-family: monospace;"></td>
88</tr>
89</table>
90<p id="msg" style="color: darkred; font-style: italic; overflow: auto; max-height: 10ex;"></p>
91</body>
92</html>

jpn.traineddata.gzのファイルが13MBあるので、初回にその分時間がかかります。

{status: "downloading jpn.traineddata.gz", loaded: 13507168, progress: 1}

投稿2018/09/08 06:47

編集2018/09/08 10:01

umyu

総合スコア5846

html
1<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>

tesseract.js'> の’が足らないところは見ました。…動かしてません。

直してエラーでるなら、エラー内容も記載して下さい。

投稿2018/09/04 14:52

oikashinoa

総合スコア2826

退会済みユーザー

2018/09/05 02:41

動きませんでした。エラー文 worker.js:8474 Uncaught DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': DOMException object could not be cloned. at https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/worker.js:8474:16 at Object.respond (https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/worker.js:8706:9) at Object.dispatchHandlers (https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/worker.js:8726:17) at https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/worker.js:8473:17 worker.js:8474 Uncaught DataCloneError: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': DOMException object could not be cloned.

oikashinoa

2018/09/08 03:53

質問文のソースが消えている… もしかしてIE11で動かしてます？（当方IEは動かせません）以下が該当するのかなぁ [IE11でpostMessageが動作しない](https://qiita.com/sakamotoryouta/items/e2f5b7a24ba962b2aa4d)

退会済みユーザー

2018/09/08 05:55

いえ、chromeで動かしています

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Tesseract-OCRの使い方を教えてください

関連した質問