Q&A
###前提・実現したいこと
canvasで描いた文字を画像に変換した上で、「tesseract.js 」というjavascriptのライブラリを使用して、文字認識を行いたい
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>canvas.html</title> 6<link rel="stylesheet" href="style.css"> 7</head> 8<body> 9<section> 10<h1>Canvas</h1> 11<nav> 12 13<p>ペンの色</p> 14<div id="color_palet"> 15 <div id="black"></div> 16 <div id="blue"></div> 17 <div id="red"></div> 18 <div id="magenta"></div> 19 <div id="green"></div> 20 <div id="cyan"></div> 21 <div id="yellow"></div> 22</div> 23<p>選択された色</p> 24<div id="now_color"></div> 25<p>背景の色</p> 26<div id="background-color"> 27 <div id="black"></div> 28 <div id="blue"></div> 29 <div id="red"></div> 30 <div id="magenta"></div> 31 <div id="green"></div> 32 <div id="cyan"></div> 33 <div id="yellow"></div> 34</div> 35<div id="now_back"></div> 36<div id="line_style"> 37 <select id="line" name="line"> 38 39 </select> 40 <button id="clear_btn">クリア</button> 41 <button type="button" name="button" id="images">文字認識</button> 42 43</div> 44</nav> 45<canvas id="drowarea" width="500" height="500" style="border:1px solid blue;"></canvas> 46</section> 47<div id="view"></div> 48<img alt="" id="image"> 49<script src="js/jquery-2.1.3.min.js"></script> 50<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.7/dist/tesseract.js'></script>
Javascript
1 2 3var canvas_mouse_event = false; //スイッチ [ true=線を引く, false=線は引かない ] ＊＊＊ 4// var txy = 10; //iPadなどは15＋すると良いかも 5var oldX = 0; //１つ前の座標を代入するための変数 6var oldY = 0; //１つ前の座標を代入するための変数 7var bold_line = 3; //ラインの太さをここで指定 8var color = "#000"; //ラインの色をここで指定 9 10 11var can = $("#drowarea")[0]; 12var context = can.getContext("2d"); 13 14$(can).on("mousedown",function(e){ 15 oldX = e.offsetX; 16 oldY = e.offsetY; 17 canvas_mouse_event = true; 18}); 19 20$(can).on("mousemove",function(e){ 21if (canvas_mouse_event ==true) { 22 var px = e.offsetX; 23 var py = e.offsetY; 24 context.strokeStyle = color; 25 context.lineWidth = bold_line; 26 context.beginPath(); 27 context.lineJoin= "round"; 28 context.lineCap = "round"; 29 context.moveTo(oldX, oldY); 30 context.lineTo(px, py); 31 context.stroke(); 32 context.closePath(); 33 oldX = px; 34 oldY = py; 35} 36}); 37 38$(can).on("mouseleave",function(e){ 39 canvas_mouse_event = false; 40}); 41 42 43$(can).on("mouseup",function(){ 44 canvas_mouse_event =false; 45}); 46 47//削除ボタン 48$("#clear_btn").on("click",function(){ 49 context.beginPath(); 50 context.clearRect(0, 0, can.width, can.height); 51}); 52 53//色変更 54$('#color_palet div').on('click',function (){ 55 if(event.target.id =="black"){ 56 color ='black'; 57 console.log("S"); 58 $("#now_color").css('background-color','black') 59 } else if (event.target.id =="blue") { 60 color ='blue'; 61 $("#now_color").css('background-color','blue') 62 }else if (event.target.id =="red") { 63 color ='red'; 64 $("#now_color").css('background-color','red') 65 } else if (event.target.id =="magenta") { 66 color ='magenta'; 67 $("#now_color").css('background-color','magenta') 68 } else if (event.target.id =="green") { 69 color ='green'; 70 $("#now_color").css('background-color','green') 71 } else if (event.target.id =="cyan") { 72 color ='cyan'; 73 $("#now_color").css('background-color','cyan') 74 } else { 75 color ='yellow'; 76 $("#now_color").css('background-color','yellow') 77 78 } 79}); 80 81 //背景色の変更 82 $('#background-color').on('click',function (){ 83 if(event.target.id =="black"){ 84 $('#drowarea').css('background-color','black') 85 } else if (event.target.id =="blue") { 86 $('##drowarea').css('background-color','blue') 87 }else if (event.target.id =="red") { 88 $('#drowarea').css('background-color','red') 89 } else if (event.target.id =="magenta") { 90 $('#drowarea').css('background-color','magenta') 91 } else if (event.target.id =="green") { 92 $('#drowarea').css('background-color','green') 93 } else if (event.target.id =="cyan") { 94 $('#drowarea').css('background-color','cyan') 95 } else { 96 $('#drowarea').css('background-color','yellow') 97 } 98}); 99 100 //線の選択生成 101 for (var i = 1; i <= 10;i++){ 102 var option =$('<option />') 103 option.val(i); 104 option.text(i+'px'); 105 $('#line').append(option); 106 } 107 108 //線の変更 109 $('#line').change(function(){ 110 var val = $(this).val(); 111 if (val==1) { 112 console.log("S"); 113 bold_line =1 114 } else if (val==2) { 115 bold_line =2 116 } else if (val==3) { 117 bold_line =3 118 }else if (val==4) { 119 bold_line =4 120 } else if (val==5) { 121 bold_line =5 122 }else if (val==6) { 123 bold_line =6 124 } else if (val==7) { 125 bold_line =7 126 } else if (val==8) { 127 bold_line =8 128 } else if (val==9) { 129 bold_line =9 130 } else{ 131 bold_line =10 132 } 133 }); 134 135//文字認識 136$('#images').click(function(){ 137var url = drowarea.toDataURL(); 138var box =$('#image').attr("src",url); 139Tesseract.recognize(url, {lang: 'language'}) 140 .progress(function(p) { console.log('progress', p)}) 141 .then(function(result) { 142 console.log('result',result) 143 $('#view').text(result.text); 144 }) 145});
###発生している問題・エラーメッセージ Uncaught DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': DOMException object could not be cloned. 上記のエラーが出ています。 ###補足情報(言語/FW/ツール等のバージョンなど) canvasで描いた文字を画像に変換することまではできています。 tesseract.jsはリファレンスと同じように使用しています。 色々と調べたのですが、「わからないことがわからない」状態になってしまい、質問しました。 何か仕様の問題等はあるのでしょうか。よろしくお願いいたします。
回答1件
0
ベストアンサー
まるっとコピペでやってみましたが、提示されているようなエラーは確認できませんでした。
こちらで確認できたエラーは次のとおりです。
GET https://cdn.rawgit.com/naptha/tessdata/gh-pages/3.02/language.traineddata.gz 404 ()
内容が404なので、URLで検索して辿り着いたこのページを見たところ、一覧から「jpn.traineddata.gz」というファイル名が適切とわかりました。
JavaScript
1//Tesseract.recognize(url, {lang: 'language'}) 2//↓ 3Tesseract.recognize(url, {lang: 'jpn'})
ソースからそれっぽいところを探し、修正を試みたところ、以下のスクリーンショットのように動作が確認できました。
環境：Windows10 + Chrome58
投稿2017/05/22 10:46
編集2017/05/22 10:51
総合スコア849
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/22 11:16
2017/05/22 11:46
2017/05/22 11:50
2017/05/22 12:00