Image to text Converter Tool Code using Javascript, HTML and Css. This Tool is Completely Tested and verified. you just need to copy and paste in your page and use.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image to Text Converter</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
width: 90%;
max-width: 600px;
background: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 20px;
text-align: center;
}
h1 {
color: #4CAF50;
}
.upload-section {
margin: 20px 0;
}
.upload-section label {
display: inline-block;
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.upload-section label:hover {
background-color: #45a049;
}
.upload-section input {
display: none;
}
.output {
margin: 20px 0;
padding: 15px;
border: 1px dashed #ddd;
background-color: #f1f1f1;
border-radius: 5px;
text-align: left;
overflow-x: auto;
}
.btn {
display: inline-block;
margin: 10px 5px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #45a049;
}
.btn.disabled {
background-color: #cccccc;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="container">
<h1>Image to Text Converter</h1>
<div class="upload-section">
<label for="imageUpload"><i class="fas fa-upload"></i> Upload Image</label>
<input type="file" id="imageUpload" accept="image/*">
</div>
<div class="output" id="output">
<p>Extracted text will appear here...</p>
</div>
<div>
<button class="btn disabled" id="copyText" disabled>Copy Text</button>
<button class="btn disabled" id="downloadText" disabled>Download Text</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/2.1.1/tesseract.min.js"></script>
<script>
const imageUpload = document.getElementById('imageUpload');
const output = document.getElementById('output');
const copyText = document.getElementById('copyText');
const downloadText = document.getElementById('downloadText');
let extractedText = "";
imageUpload.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.src = e.target.result;
img.onload = function() {
Tesseract.recognize(
img,
'eng',
{
logger: info => console.log(info)
}
).then(({ data: { text } }) => {
extractedText = text;
output.innerHTML = `<p>${text.replace(/\n/g, '<br>')}</p>`;
copyText.classList.remove('disabled');
copyText.disabled = false;
downloadText.classList.remove('disabled');
downloadText.disabled = false;
}).catch(err => {
output.innerHTML = `<p style="color: red;">Error: ${err.message}</p>`;
});
};
};
reader.readAsDataURL(file);
}
});
copyText.addEventListener('click', () => {
navigator.clipboard.writeText(extractedText).then(() => {
alert('Text copied to clipboard!');
});
});
downloadText.addEventListener('click', () => {
const blob = new Blob([extractedText], { type: 'text/plain' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'extracted_text.txt';
link.click();
});
</script>
</body>
</html>