Sachhi Tasveer Tools is your one-stop destination for powerful and easy-to-use online tools that make your work faster and smarter. We offer a wide range of free SEO tools, content writing tools, and blogging utilities to help you grow your website and improve your Google rankings. Whether you are a blogger, digital marketer, or student, our tools are designed to save your time and boost your productivity.
At SachhiTasveerTools.com, you can access features like SEO optimisation tools,
Here is a complete code for an Image-to-Text Converter Tool. This tool allows users to upload an image and extract text from it using JavaScript and the [Tesseract.js](https://github.com/naptha/tesseract.js) library, which is a popular open-source OCR (Optical Character Recognition) library.
The tool features:
- Colorful, responsive UI with CSS
- Uploading of image files
- Extracting text from images
- Displaying the extracted text on the screen
### Code
Save this as `index.html` to see it in action.
```html
Image to Text Converter
Image to Text Converter
Extracting text, please wait...
```
### Explanation of the Code
1. **HTML Structure**:
- The main container includes a title, a file input for image selection, a button to trigger the text extraction, and a div to show the extracted text or a loading message.
2. **CSS Styling**:
- The UI has a modern, colorful, and responsive design, using gradients and rounded corners for a polished look.
3. **JavaScript Functionality**:
- The `extractText` function handles the OCR process using Tesseract.js:
- It first checks if a file is uploaded.
- Shows a loading message while processing.
- Calls `Tesseract.recognize` to process the image and extract text.
- Displays the extracted text or an error message.
4. **Responsive Design**:
- Media queries adjust button sizes for smaller screens.
This tool works in any modern browser, and you just need an internet connection to load Tesseract.js. Let me know if you'd like any additional features added!