การแปลงรูปภาพข้อความเป็นข้อความที่แก้ไขได (OCR ) ด้วย js

การอ่านตัวอักษรจากรูปภาพด้วย javascript library ชื่อว่า Tesseractjs ซึ่งสามารถอ่านได้ถึง 60 ภาษา (ทางผู้พัฒนาเขาคุยมาอย่างนั้นแต่เรื่องความแม่นยำอันนี้ต้องดูเอาแต่ละภาษาครับ)

จริงๆแล้วการทำ OCR ในภาษา server slide นั้นมี library อยู่แทบทุกภาษา php,c#,java และอื่น  แต่วันนี้จะมาลองใช้ js ซึ่งอยู่ฝั่ง client  กันบ้าง

เรามาเริ่มจากตัวอย่างที่ผมทำมาก่อน ผมทำให้เลือกแค่ 2 ภาษา

ใน code ส่วน ui นั้นจะประกอบไปด้วย

1 select สำหรับเลือกภาษา  ระบุ class “langdetect” เพื่อใช้ในการเรียกค่าภาษาจาก js

<select class="form-control langdetect" > 
<option value='eng' selected> English </option> 
<option value='tha'> Thai </option> 
</select>

2 input image สำหรับเลือกรูปที่ต้องการ ใช้ #imagebroswer

<input class="form-control" id="imagebroswer" type="file">

3 element div สำหรับแสดงผลที่ได้จาการ process ตั้งชื่อ class ว่า showtxt

ต่อไปจะเป็นส่วนในการควบคุมการทำงานของ ui ด้วย javascript ครับ

$(document).ready(function(){ 

createorc($("#dataface").attr("src")); 

// ฟังก์ชั่น readURL เป็นฟังชันในการอ่านรูปจาก input file
function readURL(input) { 
if (input[0].value != "") { 
var reader = new FileReader(); 
reader.onload = function (e) { createorc(e.target.result); }  // เรียกใช้ function createorc() โดยใส่รูปที่ได้จาก input file
reader.readAsDataURL(input[0].files[0]); } 
} 


// ฟังก์ชั่น แปลงรูปเป็นข้อความและนำไปแสดงผลใน ui
function createorc(result){  // result คือรูปที่ได้จาก input file ใน function readURL ด้านบน
var img = '<img id="dataface" src="'+result+'" style="max-width:100%;">';  // สร้าง html element สำหรับแสดงรูปภาพที่ input เข้ามา
$("#preview").html(img).promise().done(             
   function(){ 
   Tesseract.recognize(result,{lang: $(".langdetect").val()})      // เรียกใช้ Tesseract โดยภาษาจะถูกดึงจาก select ภาษา class langdetect
   .progress(function (p) { $("#loading").show(); })  // event on progress ระหว่างที่ lib ทำงานจะทำการโชว์ loading  
   .then(data => { $(".showtxt").html(data.text.replace(/\n/g, "<br />")); })  // event หลังจากทำงานจบก็จะนำผลที่ได้ไปแสดงใน div.showtxt
   .catch(err => { //console.log('catch\n', err); })  // event error
   .finally(e => { $("#loading").hide(); }); }  // event เมื่อจบการทำงาน ทำการซ่อน loading
) } 



$( "#imagebroswer" ).change(function() { readURL($(this)); }); });  // จับ event ถ้า user upload รูปภาพ

จากการที่ทดสอบดูความรู้สึกว่า ภาษาอังกฤษนั้นจะแม่นยำกว่าภาษาไทยมาก

หากมีข้อสงสัยสอบถามได้ครับ

Download Source ไปลองกันดูครับ