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

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

ただいまの
回答率

88.77%

canvasで描いた文字を文字認識したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,717

goombeer

score 16

前提・実現したいこと

canvasで描いた文字を画像に変換した上で、「tesseract.js 」というjavascriptのライブラリを使用して、文字認識を行いたい

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas.html</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h1>Canvas</h1>
<nav>

<p>ペンの色</p>
<div id="color_palet">
  <div id="black"></div>
  <div id="blue"></div>
  <div id="red"></div>
  <div id="magenta"></div>
  <div id="green"></div>
  <div id="cyan"></div>
  <div id="yellow"></div>
</div>
<p>選択された色</p>
<div id="now_color"></div>
<p>背景の色</p>
<div id="background-color">
  <div id="black"></div>
  <div id="blue"></div>
  <div id="red"></div>
  <div id="magenta"></div>
  <div id="green"></div>
  <div id="cyan"></div>
  <div id="yellow"></div>
</div>
<div id="now_back"></div>
<div id="line_style">
  <select id="line" name="line">

  </select>
  <button id="clear_btn">クリア</button>
  <button type="button" name="button" id="images">文字認識</button>

</div>
</nav>
<canvas id="drowarea" width="500" height="500" style="border:1px solid blue;"></canvas>
</section>
<div id="view"></div>
<img  alt="" id="image">
<script src="js/jquery-2.1.3.min.js"></script>
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.7/dist/tesseract.js'></script>
var canvas_mouse_event = false; //スイッチ [ true=線を引く, false=線は引かない ]  ***
// var txy   = 10;               //iPadなどは15+すると良いかも
var oldX  = 0;                //1つ前の座標を代入するための変数
var oldY  = 0;                //1つ前の座標を代入するための変数
var bold_line = 3;            //ラインの太さをここで指定
var color = "#000";           //ラインの色をここで指定


var can = $("#drowarea")[0];
var context = can.getContext("2d");

$(can).on("mousedown",function(e){
  oldX = e.offsetX;
  oldY = e.offsetY;
  canvas_mouse_event = true;
});

$(can).on("mousemove",function(e){
if (canvas_mouse_event ==true) {
       var px = e.offsetX;
       var py = e.offsetY;
       context.strokeStyle = color;
       context.lineWidth = bold_line;
       context.beginPath();
       context.lineJoin= "round";
       context.lineCap = "round";
       context.moveTo(oldX, oldY);
       context.lineTo(px, py);
       context.stroke();
       context.closePath();
       oldX = px;
       oldY = py;
}
});

$(can).on("mouseleave",function(e){
  canvas_mouse_event = false;
});


$(can).on("mouseup",function(){
  canvas_mouse_event =false;
});

//削除ボタン
$("#clear_btn").on("click",function(){
  context.beginPath();
  context.clearRect(0, 0, can.width, can.height);
});

//色変更
$('#color_palet div').on('click',function (){
  if(event.target.id =="black"){
    color ='black';
    console.log("S");
    $("#now_color").css('background-color','black')
  } else if (event.target.id =="blue") {
      color ='blue';
      $("#now_color").css('background-color','blue')
  }else if (event.target.id =="red") {
      color ='red';
      $("#now_color").css('background-color','red')
  } else if (event.target.id =="magenta") {
    color ='magenta';
    $("#now_color").css('background-color','magenta')
  } else if (event.target.id =="green") {
    color ='green';
    $("#now_color").css('background-color','green')
  } else if (event.target.id =="cyan") {
      color ='cyan';
      $("#now_color").css('background-color','cyan')
  } else {
      color ='yellow';
      $("#now_color").css('background-color','yellow')

  }
});

  //背景色の変更
  $('#background-color').on('click',function (){
    if(event.target.id =="black"){
      $('#drowarea').css('background-color','black')
    } else if (event.target.id =="blue") {
      $('##drowarea').css('background-color','blue')
    }else if (event.target.id =="red") {
      $('#drowarea').css('background-color','red')
    } else if (event.target.id =="magenta") {
      $('#drowarea').css('background-color','magenta')
    } else if (event.target.id =="green") {
      $('#drowarea').css('background-color','green')
    } else if (event.target.id =="cyan") {
      $('#drowarea').css('background-color','cyan')
    } else {
      $('#drowarea').css('background-color','yellow')
    }
});

  //線の選択生成
  for (var i = 1; i <= 10;i++){
    var option =$('<option />')
    option.val(i);
    option.text(i+'px');
  $('#line').append(option);
    }

  //線の変更
  $('#line').change(function(){
    var val = $(this).val();
    if (val==1) {
      console.log("S");
      bold_line =1
    } else if (val==2) {
      bold_line =2
    } else if (val==3) {
      bold_line =3
    }else if (val==4) {
      bold_line =4
    } else if (val==5) {
      bold_line =5
   }else if (val==6) {
     bold_line =6
   } else if (val==7) {
     bold_line =7
   } else if (val==8) {
     bold_line =8
   } else if (val==9) {
     bold_line =9
   } else{
     bold_line =10
   }
 });

//文字認識
$('#images').click(function(){
var url  = drowarea.toDataURL();
var box =$('#image').attr("src",url);
Tesseract.recognize(url, {lang: 'language'})
      .progress(function(p) { console.log('progress', p)})
      .then(function(result) {
          console.log('result',result)
          $('#view').text(result.text);
        })
});


```

発生している問題・エラーメッセージ

Uncaught DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': DOMException object could not be cloned.
上記のエラーが出ています。

補足情報(言語/FW/ツール等のバージョンなど)

canvasで描いた文字を画像に変換することまではできています。
tesseract.jsはリファレンスと同じように使用しています。
色々と調べたのですが、「わからないことがわからない」状態になってしまい、質問しました。
何か仕様の問題等はあるのでしょうか。よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

まるっとコピペでやってみましたが、提示されているようなエラーは確認できませんでした。

こちらで確認できたエラーは次のとおりです。

GET https://cdn.rawgit.com/naptha/tessdata/gh-pages/3.02/language.traineddata.gz 404 ()

内容が404なので、URLで検索して辿り着いたこのページを見たところ、一覧から「jpn.traineddata.gz」というファイル名が適切とわかりました。

//Tesseract.recognize(url, {lang: 'language'})
//↓
Tesseract.recognize(url, {lang: 'jpn'})

ソースからそれっぽいところを探し、修正を試みたところ、以下のスクリーンショットのように動作が確認できました。

環境:Windows10 + Chrome58

スクリーンショット

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/22 20:16

    ありがとうございます。ご指摘のところを修正したところ、やはり「DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': DOMException object could not be cloned.
    at https://cdn.rawgit.com/naptha/tesseract.js/1.0.7/dist/worker.js:11953:16
    at Object.respond (https://cdn.rawgit.com/naptha/tesseract.js/1.0.7/dist/worker.js:12185:9)
    at Object.dispatchHandlers (https://cdn.rawgit.com/naptha/tesseract.js/1.0.7/dist/worker.js:12205:17)
    at https://cdn.rawgit.com/naptha/tesseract.js/1.0.7/dist/worker.js:11952:17

    といったエラーが出てしまいます。当方は、Mac・chorme58です。

    キャンセル

  • 2017/05/22 20:46

    何分、現象が確認できないので、現時点でこれ以上言えることはありません。

    ・ローカル/サーバーで結果は違いますか?
    ・ブラウザを変えても同じでしょうか?
    ・ライブラリのバージョンを変えてみた場合はどうでしょうか?
    ・こちら(https://jsfiddle.net/5saxqgbe/)でも同じですか?

    キャンセル

  • 2017/05/22 20:50

    Current CDN Example Not Working · Issue #81 · naptha/tesseract.js
    https://github.com/naptha/tesseract.js/issues/81

    ローカルでやると出るというコメントがあったので試してみたところ、同じエラーが確認できました。

    サーバー経由で試すか、chromeであればオプションでローカルからのAjaxを有効にしてみてください。

    【参考】
    【解説付き】chromeでXMLHttpRequestをローカルのファイルで行う方法 - Qiita
    http://qiita.com/growsic/items/a919a7e2a665557d9cf4

    キャンセル

  • 2017/05/22 21:00

    サーバにあげたら動きました!お手数をおかけしました!!

    キャンセル

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

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る