tesseract-ocr 読取値をテキストボックスへインプットする方法を教えてください
解決したいこと
tesseract-ocr テキスト読取値をテキストボックスへインプットしたいです
※出来たらボタンを押したらインプットすようにしたいです
解決方法を教えて下さい。
該当するソースコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>ECSS3.0</title>
<link rel="stylesheet" href="css/stylesheet.css">
<link href="css/slick.css" rel="stylesheet" type="text/css">
<link href="css/slick-theme.css" rel="stylesheet" type="text/css">
<style>
#container2 {
overflow: hidden;
}
canvas {
float: left;
}
#result-text {
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<script src="script.js"></script>
<div class="header">
<div class="header-logo"font-weight:bold;>E<span style="font-size:0.3em;font-weight:normal;">lectronic</span>
C<span style="font-size:0.3em;font-weight:normal;">heck</span>
S<span style="font-size:0.3em;font-weight:normal;">heet</span>
S<span style="font-size:0.3em;font-weight:normal;">ystem</span>
</div>
<div id="container">
<div class="circle icon">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</div>
</div>
<div id="containerLogo">
<a href="index.html"><img src="images/TCD_B.jpg"></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("#container").click(function () {
$(".icon").toggleClass("close");
})
</script>
</div>
<!-- <div class="main"> -->
<nav id="nav">
<ul>
<!-- <li><a href="#" onclick="window.close(); return false;">Close</a></li> -->
<li><a href="index.html">Menu</a></li>
</ul>
</nav>
<div id='container2'>
<canvas width='500' height='400'></canvas>
<div id='result-text'></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/2.1.4/tesseract.min.js'></script>
<script>
// canvas(video)&text(result-text)宣言
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const image = document.createElement('video');
const resultText = document.getElementById('result-text');
let textBlocks = [];
// videoのサイズ変更
image.videoWidth = canvas.width;
image.videoHeight = canvas.height;
navigator.mediaDevices.getUserMedia({
video: {
facingMode: { ideal: 'environment' },
}
})
.then(stream => {
image.srcObject = stream;
image.play();
videoDisplay();
setTimeout(analysis);
});
// 赤枠の発火条件_Textデータの個数が0以上
const videoDisplay = () => {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
context.strokeStyle = "rgb(255, 0, 0) ";
context.lineWidth = 3;
// Path描画（閉じたオブジェクト）
context.beginPath(100, 150);
context.lineTo(400, 150);
context.lineTo(400, 250);
context.lineTo(100, 250);
context.lineTo(100, 150);
context.closePath();
context.stroke();
// 青枠の発火条件_Textデータの個数が1以上
context.strokeStyle = "rgb(0, 0, 255) ";
textBlocks.forEach((block) => {
context.beginPath(block.bbox.x0, block.bbox.y0);
context.lineTo(block.bbox.x1, block.bbox.y0);
context.lineTo(block.bbox.x1, block.bbox.y1);
context.lineTo(block.bbox.x0, block.bbox.y1);
context.lineTo(block.bbox.x0, block.bbox.y0);
context.closePath();
context.stroke();
});
// textBlocks
console.log(textBlocks)
requestAnimationFrame(videoDisplay);
};
// 発火条件
const analysis = () => {
(async () => {
const worker = Tesseract.createWorker();
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
const { data: { text, blocks } } = await worker.recognize(canvas.toDataURL(), {
rectangle: {
left: 100, top: 150, width: 300, height: 100
}
});
textBlocks = blocks;
await worker.terminate();
resultText.innerHTML = text.replace(/\r?\n/g, '<br>');
setTimeout(analysis, 800);
})();
};
</script>
<!-- <div class="main">
<div class="contents">
<div class="contents-item">
<a href="ocr.html"><img src="images/Camera.png"></a>
<p>Camera</p>
</div>
<div class="contents-item">
<img src="images/Create.png">
<p>Create</p>
</div>
</div>
</div> -->
<!-- </div> -->
<div class="SDkEP">
<div id="inputWrapper">
<div class="inputTextBox">
<input id="input" type="search" autocomplete="off" aria-live="polite" placeholder="ED を入力">
</div>
<div class="inputTextBox">
<input id="input" type="search" autocomplete="off" aria-live="polite" placeholder="DS を入力">
</div>
</div>
</div>
</body>
</html>
0 likes
