To create an image-to-text converter using HTML, CSS, and JavaScript, we can build a simple web application. In this example, we'll use Tesseract.js, a JavaScript library that provides OCR functionality. Please note that this is a basic implementation, and more advanced features can be added to enhance the user experience.
In this code, we have a simple HTML layout with an image input, an image element to display the uploaded image, a button to trigger the conversion, and a pre element to display the extracted text. The Tesseract.js library is loaded from a CDN to perform OCR on the uploaded image.
When the user selects an image using the input element, the image will be displayed, and the "Convert Image to Text" button will be enabled. When the user clicks the button, the OCR process will be triggered using Tesseract.js, and the extracted text will be displayed in the output area.
Please note that this implementation runs entirely on the client-side, and it's essential to validate and sanitize user inputs in a production environment. Additionally, for larger-scale applications, server-side processing might be more suitable to handle multiple OCR requests efficiently.
<!-- www.camboits.com -->
<!-- pha-dev.com -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image to Text Converter</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<style>
body {
font-family: Arial, sans-serif;
}
#inputImage {
max-width: 100%;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
#outputText {
width: 100%;
height: 200px;
border: 1px solid #ccc;
padding: 10px;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center">Image to Text Converter</h1>
<div class="mb-4">
<input type="file" id="imageInput" accept="image/*" class="btn btn-sm">
<img id="inputImage" src="" alt="Uploaded Image">
</div>
<button id="convertBtn" class="btn btn-sm mb-4 btn-success" disabled>Convert Image to Text</button>
<textarea id="outputText"></textarea>
</div>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js"></script>
<script>
const imageInput = document.getElementById('imageInput');
const inputImage = document.getElementById('inputImage');
const convertBtn = document.getElementById('convertBtn');
const outputText = document.getElementById('outputText');
imageInput.addEventListener('change', function() {
const file = imageInput.files[0];
const reader = new FileReader();
reader.onload = function() {
inputImage.src = reader.result;
convertBtn.disabled = false;
}
if (file) {
reader.readAsDataURL(file);
}
});
convertBtn.addEventListener('click', function() {
Tesseract.recognize(
inputImage.src,
'khm+eng', // Specify 'khm' for Khmer language
{ logger: info => console.log(info) }
).then(({ data: { text } }) => {
outputText.textContent = text;
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>