Chia Sẻ Code Lấy Văn Bản Trên Hình Ảnh – Free Download

Tesseract Là Gì?

Tesseract là thư viện một công cụ mã nguồn mở, sử dụng để nhận dạng ký tự từ hình ảnh. được Google phát triển và có khả năng nhận dạng văn bản từ ảnh chụp hoặc tệp hình ảnh. Thư viện này được sử dụng rộng rãi trong các ứng dụng OCR (Optical Character Recognition) để chuyển đổi hình ảnh có chứa văn bản thành văn bản và có thể tùy chỉnh được.

Cách Thực Hiện

• Bước 1 : Truy cập vào quản trị của Website WordPress/Blogger
• Bước 2 : Vào mục Trang → Thêm/Tạo Trang Mới → chuyển sang phần chỉnh sửa HTML
• Bước 3 : Sao chép tất cả đoạn code HTML bên dưới dán vào phần chỉnh sửa HTML như ở Bước 2

<style>
/* CSS styles */
#read-container {
  position: relative;
}

#imageInput {
  display: none; /* Ẩn input[type="file"] mặc định */
}

.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;
}

.custom-file-input:active {
  background-color: #2980b9;
  color: #fff;
}

.file-name {
  display: none; /* Ẩn tên tệp mặc định */
}

#result {
  border: 2px solid #3498db;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
  position: relative;
  min-height: 100px;
}

.copy-btn-container {
  text-align: center;
  margin-top: 10px;
}

.copy-btn {
  padding: 5px 10px;
  background-color: #6750a4;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.copy-btn:hover {
  background-color: #483d8b;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/5.0.4/tesseract.min.js"></script>
<p>Chuyển hình ảnh thành văn bản online miễn phí.</p>
<p> Lưu ý: chỉ tốt nhất khi sử dụng ảnh có chữ đen và nền trắng.</p>
<div id='read-container'>
  <label for="imageInput" class="custom-file-input">Chọn hình ảnh</label>
  <span class="file-name"></span>
  <button onclick="performOCR()" class="custom-file-input">Tách lấy chữ</button>
  <input type="file" id="imageInput" accept="image/*" class="custom-file-input">
  <div id="result"></div>
  <div class="copy-btn-container"></div> <!-- Thêm một div để chứa nút COPY ALL -->
</div>

<script>
// JavaScript code
document.getElementById('imageInput').addEventListener('change', function() {
  var fileName = this.files[0].name; // Lấy tên của tệp đã chọn
  var fileNameSpan = document.querySelector('.file-name'); // Lấy tham chiếu đến phần hiển thị tên tệp
  fileNameSpan.textContent = fileName; // Hiển thị tên tệp đã chọn
  fileNameSpan.style.display = 'inline-block'; // Hiển thị phần hiển thị tên tệp
});

function performOCR() {
  var inputElement = document.getElementById('imageInput');
  var resultElement = document.getElementById('result');
  var copyBtnContainer = document.querySelector('.copy-btn-container'); // Lấy tham chiếu đến vùng chứa nút COPY ALL
  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>';
            var copyBtn = document.createElement('button'); // Tạo nút COPY ALL
            copyBtn.textContent = 'COPY ALL';
            copyBtn.classList.add('copy-btn');
            copyBtn.addEventListener('click', function() { // Thêm sự kiện click cho nút COPY ALL
              copyText(data.text);
            });
            copyBtnContainer.innerHTML = ''; // Xóa bất kỳ nút COPY ALL nào trước đó
            copyBtnContainer.appendChild(copyBtn); // Thêm nút COPY ALL vào vùng chứa
          } else {
            console.log('OCR Result not found.');
            resultElement.innerHTML = '<p>OCR Result not found.</p>';
            copyBtnContainer.innerHTML = ''; // Xóa bất kỳ nút COPY ALL nào trước đó nếu không có kết quả
          }
        });
      };
    };
    reader.readAsDataURL(file);
  } else {
    alert('Vui lòng chọn một hình ảnh.');
  }
}

function copyText(text) {
  var textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);

  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);

  alert('Đã sao chép thành công!');
}
</script>

• Bước 4 : Sau khi đã dán toàn bộ đoạn code HTML ở trên xong thì Lưu (Save) lại và xem kết quả thôi.

Kết Luận

Cảm ơn bạn đã lựa chọn aetrick.net thay vì hàng triệu website khác ngoài kia. Xin cảm ơn