CODE
BÀI VIẾT
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <title>OCR tiếng Việt với Tesseract.js</title> <script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script> <style> body { font-family: Arial, sans-serif; max-width: 600px; margin: 50px auto; } .result { margin-top: 20px; white-space: pre-wrap; background: #f4f4f4; padding: 10px; border-radius: 5px; } progress { width: 100%; height: 20px; margin-top: 10px; } </style> </head> <body> <h2>Chuyển hình ảnh sang text (Tiếng Việt)</h2> <input type="file" id="fileInput" accept="image/*"><br><br> <button id="startBtn">Bắt đầu OCR</button> <progress id="progress" value="0" max="1"></progress> <div id="status"></div> <h3>Kết quả:</h3> <div class="result" id="resultText"></div> <script> document.getElementById('startBtn').addEventListener('click', () => { const file = document.getElementById('fileInput').files[0]; if (!file) { alert("Vui lòng chọn ảnh trước!"); return; } document.getElementById('resultText').textContent = ''; document.getElementById('status').textContent = 'Đang xử lý...'; document.getElementById('progress').value = 0; Tesseract.recognize( file, 'vie', // Ngôn ngữ tiếng Việt { logger: m => { console.log(m); if (m.status === 'recognizing text') { document.getElementById('progress').value = m.progress; } document.getElementById('status').textContent = m.status; } } ).then(({ data: { text } }) => { document.getElementById('resultText').textContent = text; document.getElementById('status').textContent = 'Hoàn thành'; }).catch(err => { console.error(err); document.getElementById('status').textContent = 'Có lỗi xảy ra!'; }); }); </script> </body> </html>
Đọc text trong hình ảnh
Html & Css
,
Javascript
ihoan
đã viết 7 tháng trước
557
Bài viết cùng chủ đề
Căn giữa Hình ảnh, thẻ Div, Text trong CSS
Code lịch hiển thị thời gian ngày tháng hiện tại bằng Javascript
Tạo mã QR với thư viện QRcode
Thư viện mã QR kèm logo ở giữa
Tạo hộp thời tiết bằng API openweathermap code Javascript
Chia cột bằng thuộc tính display flex trong CSS
Hướng dẫn CSS border gradient
Hiệu ứng Hover cho hình ảnh khi đưa chuột vào
Xóa bỏ gạch chân cho link trong html css
Chia cột bằng thuộc tính display grid trong CSS