Get Code Here :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Technology Mindset - Image to Text Converter</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
padding: 30px;
text-align: center;
width: 80%;
max-width: 600px;
}
h1 {
color: #007BFF;
}
h2 {
color: #333;
margin-bottom: 20px;
}
input[type="file"] {
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}
button {
margin-top: 20px;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #28a745;
color: #fff;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
#output {
margin-top: 20px;
text-align: left;
}
#extractedText {
white-space: pre-wrap;
background-color: #f8f9fa;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>The Technology Mindset</h1>
<h2>Image to Text Converter</h2>
<input type="file" id="imageUpload" accept="image/*">
<button id="convertBtn">Convert to Text</button>
<div id="output">
<h3>Extracted Text:</h3>
<pre id="extractedText"></pre>
</div>
</div>
<script>
document.getElementById('convertBtn').addEventListener('click', () => {
const fileInput = document.getElementById('imageUpload');
const output = document.getElementById('extractedText');
if (fileInput.files.length === 0) {
alert('Please select an image file.');
return;
}
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.src = event.target.result;
img.onload = function() {
Tesseract.recognize(
img,
'eng',
{
logger: m => console.log(m)
}
).then(({ data: { text } }) => {
output.textContent = text;
}).catch(err => {
console.error(err);
output.textContent = 'An error occurred while processing the image.';
});
};
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>
Explanation:
HTML Structure
- Document Type and Language: Declares the document type and sets the language to English.
- Head Section: Contains metadata and the title of the page. The
<style>tag includes embedded CSS for styling. - Body Section: Contains the main content of the page wrapped in a
.containerdiv.- Heading Elements: Includes
<h1>and<h2>for title and subtitle. - File Input:
<input type="file">allows users to select an image file. It accepts only image files (accept="image/*"). - Convert Button:
<button>triggers the conversion process when clicked. - Output Area:
<div id="output">displays the extracted text wrapped in<pre id="extractedText">.
- Heading Elements: Includes
CSS Styling
- Body: Sets the background color, centers content vertically and horizontally using flexbox.
- Container: Styles the container with a white background, rounded corners, box shadow, padding, and limits its width.
- Headings: Colors
<h1>in blue and<h2>in dark gray with margins. - Input and Button: Styles
<input type="file">with margins, padding, borders, and border radius. The<button>has specific styles for padding, background color, text color, and hover effects. - Output Area: Styles the output area with margins, padding, background color, border, border radius, and pre-wrap for maintaining text formatting.
JavaScript Functionality
- Event Listener: Adds an event listener to the
Convert to Textbutton (convertBtn). - File Input Handling: Checks if a file is selected. If not, alerts the user.
- File Reader: Loads the selected image file using
FileReaderto convert it into a data URL. - Image Loading: Creates an
<img>element dynamically and assigns the data URL to itssrcattribute. - Text Extraction: Uses Tesseract.js (
Tesseract.recognize) to extract text from the loaded image. - Error Handling: Catches and logs any errors that occur during text extraction, displaying an error message in the output area.
0 Comments