Đọc text trong hình ảnh

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

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

Căn giữa Hình ảnh, thẻ Div, Text trong CSS

Chia cột bằng thuộc tính display flex trong CSS

Chia cột bằng thuộc tính display grid trong CSS

Tạo hộp thời tiết bằng API openweathermap code Javascript

Nhập vào input hiển thị số dạng rút ngắn theo đơn vị

Thay đổi màu link khi di chuột vào

Bộ lọc select tỉnh thành, quận huyện sử dựng API provinces.open-api.vn

Hiệu ứng Hover cho hình ảnh khi đưa chuột vào

Thư viện mã QR kèm logo ở giữa

Crop hình ảnh bằng CSS đơn giản và cần thiết