|
 |
| |
สอบถามว่า มีวิธีไหน ที่จะเอา Code Tesseract.js v2.1.4 จาก https://www.thaicreate.com/php/forum/135891.html ตรงที่ความคิดเห็นที่ 4 ที่แก้ปัญหาเรื่อง ค้างที่หน้า initialized api แล้ว มาใช้กับระบบ OCR เดิม ที่ใช้คู่กับ Tesseract.js v2.1.0 ได้ครับ |
| |
 |
|
|
 |
 |
|
สอบถามว่า มีวิธีไหน ที่จะเอา Code Tesseract.js v2.1.4 จาก https://www.thaicreate.com/php/forum/135891.html ตรงที่ความคิดเห็นที่ 4 ที่แก้ปัญหาเรื่อง ค้างที่หน้า initialized api แล้ว มาใช้กับระบบ OCR เดิม ที่ใช้คู่กับ Tesseract.js v2.1.0 ได้ครับ
Code ทั้งหมด มีดังนี้ครับ
1. Code Tesseract.js v2.1.4 จาก https://www.thaicreate.com/php/forum/135891.html ตรงที่ความคิดเห็นที่ 4 ที่แก้ปัญหาเรื่อง ค้างที่หน้า initialized api แล้ว ที่ต้องการมาใช้กับระบบ OCR เดิม ที่ใช้คู่กับ Tesseract.js v2.1.0 ได้ครับ
<!doctype html>
<html>
<head>
<title>ทดสอบ Tesseract.js 4</title>
</head>
<body>
<p id="status"></p>
<script src="http://localhost/ocrtest2021/tesseract.min.js"></script>
<script>
var sta = document.getElementById("status");
/* Code to crossOrigin = anonymous */
var recogImage = new Image;
recogImage.crossOrigin = "anonymous"; /* THIS WILL MAKE THE IMAGE CROSS-ORIGIN */
recogImage.src = "http://localhost/ocrtest2021/test-ocr-2021.jpg";
const worker = Tesseract.createWorker({
logger: m => sta.innerHTML = m.status
});
Tesseract.setLogging(true);
work();
async function work() {
await worker.load();
await worker.loadLanguage('eng+tha');
await worker.initialize('eng+tha');
//let result = await worker.detect(recogImage);
//console.log(result.data);
let result = await worker.recognize(recogImage);
sta.innerHTML = result.data.text;
await worker.terminate();
}
// https://www.thaicreate.com/php/forum/135293.html
</script>
</body>
</html>
2. ไฟล์ ocradd.php ที่เป็น Code ระบบ OCR เดิม ที่ใช้คู่กับ Tesseract.js v2.1.0 ครับ
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/tesseract.js"></script>
<script>
$(document).ready(function(){
createorc($("#dataface").attr("src"));
function readURL(input) {
if (input[0].value != "") {
var reader = new FileReader();
reader.onload = function (e) {
createorc(e.target.result);
}
reader.readAsDataURL(input[0].files[0]);
}
}
function createorc(result){
var img = '<img id="dataface" src="'+result+'" style="max-width:100%;">';
$("#preview").html(img).promise().done(function(){
Tesseract.recognize(result,{lang: $(".langdetect").val()})
.progress(function (p) { $("#loading").show(); })
.then(data => {
$(".addvalue4").html(data.text.replace(/\n/g, ""));
})
.catch(err => {
//console.log('catch\n', err);
})
.finally(e => {
$("#loading").hide();
});
}
)
}
$( "#imagebroswer" ).change(function() {
readURL($(this));
});
});
</script>
<head>
<style type="text/css">
@font-face {
font-family: THSarabun;
src: url(thsarabunnew-webfont.woff);
}
html {
font-family: THSarabun;
}
p {display:inline;}
details {display: inline-block;}
div.textpopup {
border: 2px solid black;
width: 670px;
padding: 10px;
margin: 20px;
}
#loading {
display:none;
top: 0;
left: 0;
background-color: rgba(255,255,255,.9);
min-width: 100%;
min-height: 100%;
height: auto;
position: fixed;
z-index: 100000000;
}
.abx{
position: absolute;
width:100%;
text-align: center;
top:25%;
}
details > summary {
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
</style>
</head>
<body>
<div id="loading">
<div class="abx">
<div align="center" style="font-size: 50px;"><strong>กำลัง Load รูปภาพ</strong></div><br><br>
<div align="center"><img src="loading.gif"></div>
</div>
</div>
<form action="save2.php" name="frmAdd" id="frmAdd" method="post" enctype="multipart/form-data">
<div class="textpopup">
<details>
<summary>ทดสอบระบบ OCR ครับ</summary>
<div id="form-group1" class="form-group">
<div class="col-md-3">
<label for="">เลือกภาษา</label>
<select class="form-control langdetect" >
<option value='eng' selected> English </option>
<option value='tha'> Thai </option>
</select>
</div>
<div class="col-md-3">
<label for="">เลือกรูป</label>
<input class="form-control" name="imagebroswer" id="imagebroswer" type="file">
</div>
<div id="preview" class="col-md-6">
<img id="dataface" src="txtsample.png" style="max-width:100%;">
</div>
</div>
</details>
<textarea rows="1" cols="14" class="addvalue4 " name="addvalue4" style="border:none; resize:none;"></textarea>
</tbody>
</table>
</div>
</form>
<script>
$(document).keypress(
function(event){
if (event.which == '13') {
event.preventDefault();
}
});
</script>
<script>
var today = new Date();
var date = today.getDate()+'/'+(today.getMonth()+1)+'/'+(today.getFullYear()+543);
document.getElementById("addvalue1").value = date;
</script>
</body>
</html>
3. Link โหลดไฟล์ Code ทั้งหมด เกี่ยวกับ ระบบ OCR เดิม ที่ใช้คู่กับ Tesseract.js v2.1.0 ได้ครับ
https://drive.google.com/file/d/14L2wFkzCeY3KRt3rksUKjs85wSZbpxdu/view?usp=sharing
4. VDO ยืนยัน เรื่อง Code ระบบ OCR เดิม ที่ใช้คู่กับ Tesseract.js v2.1.0 ได้ครับ
https://www.youtube.com/watch?v=hh0eQjDiIEs&feature=youtu.be
5. รูปที่ใช้ในการทดสอบเรื่อง OCR ของ Code ตามข้อ 2 ครับ
Tag : PHP, HTML, HTML5, JavaScript, XAMPP, Windows
|
|
|
 |
 |
 |
 |
| Date :
2021-02-11 19:55:54 |
By :
doanga2007 |
View :
1358 |
Reply :
4 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ถ้า 2.1.0 ทำได้ 2.1.4 ก็น่าจะทำได้ เพราะเป็น gen 2.x เหมือนกัน
เปลี่ยนแค่ tesseract.js ไม่ได้หรือครับ
|
| |
|
|
| |
| Date :
2021-02-12 13:41:33 |
By :
lakornworld |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ผมโดนต้มซะเปื่อยเลย ของเดิมเป็น tesseract.js 1.0.10 นะครับไม่ใช่ 2.1.0 มันคนละ gen กัน ถึงว่าทำไมเปลี่ยนแค่ js ไม่ได้
ทดสอบ tesseract.js 2.1.4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
@font-face {
font-family: THSarabun;
src: url(thsarabunnew-webfont.woff);
}
html,
body {
font-family: THSarabun;
}
p {
display: inline;
}
details {
display: inline-block;
line-height: normal;
}
div.textpopup {
border: 2px solid black;
width: 50%;
padding: 10px;
margin: 20px;
}
#loading {
display: none;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, .9);
min-width: 100%;
min-height: 100%;
height: auto;
position: fixed;
z-index: 100000000;
}
.abx {
position: absolute;
width: 100%;
text-align: center;
top: 25%;
}
details>summary {
list-style: none;
}
details>summary::-webkit-details-marker {
display: none;
}
select {
padding: 3px 12px !important;
}
label {
margin-top: 5px;
margin-bottom: 0;
}
#preview {
margin-top: 15px;
}
#process {
font-size: 24px !important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/tesseract214.min.js"></script>
<script>
$(document).ready(function () {
createorc($("#dataface").attr("src"));
function readURL(input) {
if (input[0].value != "") {
var reader = new FileReader();
reader.onload = function (e) {
createorc(e.target.result);
}
reader.readAsDataURL(input[0].files[0]);
}
}
function createorc(result) {
var img = '<img id="dataface" src="' + result + '" style="max-width:100%;">';
var recogImage = result;
const worker = Tesseract.createWorker({
logger: m => $("#process").html(m.status)
});
Tesseract.setLogging(true);
$("#loading").show();
work();
async function work() {
await worker.load();
await worker.loadLanguage($(".langdetect").val());
await worker.initialize($(".langdetect").val());
//let result = await worker.detect(recogImage);
//console.log(result.data);
let result = await worker.recognize(recogImage);
if ($(".langdetect").val() === "tha") {
$(".addvalue4").val(result.data.text.replaceAll(' ',''));
} else {
$(".addvalue4").val(result.data.text);
}
$("#preview").html(img)
await worker.terminate();
$("#loading").hide();
}
}
$("#imagebroswer").change(function () {
readURL($(this));
});
});
</script>
</head>
<body>
<div id="loading">
<div class="abx">
<div align="center" style="font-size: 50px;"><strong>กำลัง Load รูปภาพ</strong></div>
<br><span id="process"></span><br><br>
<div align="center"><img src="loading.gif"></div>
</div>
</div>
<form action="save2.php" name="frmAdd" id="frmAdd" method="post" enctype="multipart/form-data" style="margin-left: 30%;">
<div class="textpopup">
<details>
<summary>ทดสอบระบบ OCR ครับ</summary>
<div id="form-group1" class="form-group">
<div class="col-md-6">
<label for="">เลือกภาษา</label>
<select class="form-control langdetect" >
<option value='eng' selected> English </option>
<option value='tha'> Thai </option>
<option value='eng+tha'> English + Thai </option>
</select>
<label for="">เลือกรูป</label>
<input class="form-control" name="imagebroswer" id="imagebroswer" type="file">
</div>
<div id="preview" class="col-md-6">
<img id="dataface" src="txtsample.png" style="max-width:100%;">
</div>
<textarea class="addvalue4 " name="addvalue4" style="border:none; resize:none; width:90%; margin:15px 5px 0px 20px; padding: 5px;"></textarea>
</div>
</details>
</tbody>
</table>
</div>
</form>
<script>
$(document).keypress(
function(event){
if (event.which == '13') {
event.preventDefault();
}
});
</script>
<script>
var today = new Date();
var date = today.getDate()+'/'+(today.getMonth()+1)+'/'+(today.getFullYear()+543);
document.getElementById("addvalue1").value = date;
</script>
</body>
</html>
พวก html tag ปิดที่เกินมา (</tbody></table>) และ script ติดท้ายไฟล์ผมไม่ได้เคลียร์ให้
|
ประวัติการแก้ไข
2021-02-17 15:48:19
| |
|
|
| |
| Date :
2021-02-17 15:40:43 |
By :
lakornworld |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
