Image to Text Converter
Image to Text Converter
Upload an image to begin.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 400px;
text-align: center;
}
h1 {
color: #4CAF50;
margin-bottom: 20px;
font-size: 24px;
}
.upload-section input {
margin: 20px 0;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
background-color: #f9f9f9;
width: 80%;
}
.preview-section {
margin: 20px 0;
}
.preview-section img {
max-width: 100%;
border-radius: 8px;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-bottom: 20px;
}
.btn:hover {
background-color: #45a049;
}
.output-section {
margin-top: 20px;
}
textarea {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
resize: none;
font-size: 16px;
}
.status {
margin-top: 20px;
color: #555;
}
.status.success {
color: #4CAF50;
}
.status.error {
color: red;
}
// Get the DOM elements
const imageUpload = document.getElementById('image-upload');
const imagePreview = document.getElementById('image-preview');
const convertBtn = document.getElementById('convert-btn');
const outputText = document.getElementById('output-text');
const statusText = document.getElementById('status');
// Event listener for image upload
imageUpload.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
imagePreview.style.display = 'block';
imagePreview.src = e.target.result;
statusText.textContent = 'Image ready. Click "Convert to Text" to extract text.';
statusText.classList.remove('error');
statusText.classList.add('success');
};
reader.readAsDataURL(file);
}
});
// Event listener for converting image to text
convertBtn.addEventListener('click', function() {
const file = imageUpload.files[0];
if (!file) {
statusText.textContent = 'Please upload an image first!';
statusText.classList.add('error');
return;
}
statusText.textContent = 'Processing image...';
statusText.classList.remove('success');
statusText.classList.add('error');
Tesseract.recognize(
file,
'eng',
{
logger: (m) => console.log(m),
}
).then(({ data: { text } }) => {
outputText.value = text;
statusText.textContent = 'Text extraction complete!';
statusText.classList.remove('error');
statusText.classList.add('success');
}).catch((error) => {
statusText.textContent = 'An error occurred while processing the image.';
statusText.classList.add('error');
console.error(error);
});
});
