Chuyển hình ảnh thành văn bản với Tesseract

Chuyển Đổi Hình Ảnh thành Văn Bản Dễ Dàng với Ứng Dụng OCR Tesseract.js

Nhận Diện Ký Tự từ Hình Ảnh với Tesseract.js: Bước Vào Thế Giới OCR Đơn Giản

OCR Nhanh Chóng và Hiệu Quả với Tesseract.js: Biến Ảnh thành Văn Bản chỉ trong vài Bước

<style>
/*<![CDATA[*/
#read-container{font-family:'Arial',sans-serif;margin:20px;text-align:center}
#read-container .custom-file-input{display:inline-block;padding:10px;font-size:14px;font-weight:bold;text-align:center;white-space:nowrap;cursor:pointer;border:2px solid #3498db;color:#3498db;border-radius:5px;background-color:#fff;transition:background-color 0.3s ease-in-out,color 0.3s ease-in-out}
.custom-file-input:hover{background-color:#3498db;color:#fff}
#read-container .custom-file-input:active{background-color:#2980b9;color:#fff}
#read-container .file-name{display:inline-block;margin-left:10px;font-style:italic}
#read-container label{display:inline-block;padding:10px;background-color:#3498db;color:#fff;cursor:pointer;border-radius:5px}
#read-container button{padding:10px;background-color:#2ecc71;color:#fff;border:none;border-radius:5px;cursor:pointer}
#read-container #result{margin-top:20px}
#read-container pre{white-space:pre-wrap}
/*]]>*/
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/5.0.4/tesseract.min.js"></script>
<div id='read-container'>
  <input type="file" id="imageInput" accept="image/*" class="custom-file-input">
  <span class="file-name"></span>
  <button onclick="performOCR()">Tách lấy chữ</button>
  <div id="result"></div>
</div>
<script>
//<![CDATA[
  function performOCR() {
    var inputElement = document.getElementById('imageInput');
    var resultElement = document.getElementById('result');
    var file = inputElement.files[0];
    if (file) {
      var reader = new FileReader();
      reader.onload = function(e) {
        var img = new Image();
        img.src = e.target.result;
        img.onload = function() {
          Tesseract.recognize(img, 'vie', {
            logger: info => console.log(info),
            psm: 3,
          }).then(({
            data
          }) => {
            if (data && data.text) {
              console.log('OCR Result:', data.text);
              resultElement.innerHTML = '<p>OCR Result:</p><pre>' + data.text + '</pre>';
            } else {
              console.log('OCR Result not found.');
              resultElement.innerHTML = '<p>OCR Result not found.</p>';
            }
          });
        };
      };
      reader.readAsDataURL(file);
    } else {
      alert('Please select an image.');
    }
  }
//]]>
</script>