Tạo trang chuyển hình ảnh thành văn bản online cho blogspot

Tesseract là một công cụ OCR mã nguồn mở mạnh mẽ, giúp bạn dễ dàng chuyển đổi hình ảnh thành văn bản với độ chính xác cao.

Chuyển hình ảnh thành văn bản trực tuyến là quá trình sử dụng các công cụ OCR (Optical Character Recognition) để nhận diện và chuyển đổi văn bản từ hình ảnh thành văn bản có thể chỉnh sửa.

Tạo trang chuyển hình ảnh thành văn bản online cho blogspot.

Bài viết này sẽ share code tạo trang Chuyển hình ảnh thành văn bản với Tesseract

(getButton) #text=(Xem Demo) #icon=(link) #size=(1)

Giới thiệu Tesseract

Tesseract là một thư viện OCR (Optical Character Recognition - Nhận diện ký tự quang học) mã nguồn mở, được phát triển bởi nhóm Google Research. OCR là một công nghệ có khả năng chuyển đổi hình ảnh chứa văn bản thành văn bản có thể xử lý được. Tesseract có khả năng nhận diện ký tự từ hình ảnh và chuyển nó thành văn bản có thể sử dụng.

Tesseract được xây dựng để hỗ trợ nhiều ngôn ngữ và nó có thể nhận diện văn bản từ các hình ảnh chất lượng thấp, hình ảnh có nền độc lập, và các loại font khác nhau. Nó đã trải qua nhiều bản cập nhật và cải tiến từ cộng đồng người phát triển.

Trong mã JavaScript bạn đã cung cấp, đoạn mã sử dụng thư viện Tesseract.js để thực hiện OCR trên hình ảnh được chọn bởi người dùng từ một tệp hình ảnh. Kết quả sau cùng là văn bản được nhận diện từ hình ảnh.

Hướng dẫn cách làm

Bước 1: Vào tạo Trang mới

Bước 2: Tại mục trang mới chuyển sang Chế độ xem HTML và dán đoạn code dưới này vào:

<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>

Bước 3: Xuất bản Trang và xem kết quả.

Khi sử dụng các công cụ OCR, lưu ý rằng chất lượng của kết quả phụ thuộc vào độ rõ nét của hình ảnh gốc và ngôn ngữ của văn bản. Các công cụ này có thể gặp khó khăn với các hình ảnh có chất lượng thấp hoặc văn bản viết tay.

Link Nguồn

https://www.giaodien.blog/2024/01/chuyen-hinh-anh-thanh-van-ban-voi-Tesseract.html