Share code chuyển hình ảnh sang văn bản online cho Blogspot

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