Create OCR Application for Typed Text Using Tesseract.js
Photo from Pexels
Originally Posted On: https://medium.com/@fatkhul.amali/create-ocr-application-for-typed-text-use-tesseract-js-2fa2b4e4f6da
Creating a Tool for Converting Images to Text with Tesseract.js
Tesseract.js is a pure Javascript port of the popular Tesseract OCR engine. Tesseract.js is a JavaScript library that provides Optical Character Recognition (OCR) capabilities. Its primary function is to analyze images and extract text from them. Tesseract.js is a browser-compatible wrapper around the Tesseract OCR engine, which was originally written in C++ but has been ported to JavaScript for use in web browsers and Node.js environments.
Steps to Install and Use Tesseract.js. We use Node JS
- Initialize Your Project (if not already initialized):
npm initThis creates a package.json file, which tracks dependencies for your project.
2. Install Tesseract.js:
npm install tesseract.jsThis will:
- Download and add Tesseract.js to your project’s
node_modules. - Add it as a dependency in your
package.json.
We have completed the installation process for the Tesseract.js library. Now, let’s proceed to use Tesseract.js for our OCR project.
- Importing Tesseract.js into Your Code. Since we are using CommonJS in our project, we will write the following:
const T = require("tesseract.js");2. Define the image and language for Tesseract
// Define the image path and language for OCRconst imagePath = './image1.jpeg';const language = 'eng';3. Use Tesseract.js: Example of recognizing text from an image:
// Define the logger function to track progressfunction logProgress(event) { console.log(event); }// Perform the OCR process
T.recognize(imagePath, language, {
logger: logProgress // Use the logger to track progress
})
.then((result) => {
// Handle the successful OCR result
console.log(‘OCR Result:’, result.data.text);
})
.catch((error) => {
// Handle any errors during the OCR process
console.error(‘OCR Error:’, error);
});
Code Explanation :
// Define the logger function to track progressfunction logProgress(event) { console.log(event); }// Perform the OCR process
T.recognize(imagePath, language, {
logger: logProgress // Use the logger to track progress
})
The logger is a built-in feature of Tesseract.js. By default, the logger is a function. In Tesseract.js, the logger function is used to track the progress of the OCR process.
The content of the logger is a function, often named logProgress, which accepts a parameter called event. This event contains progress information about the OCR process.
So, when you pass a function like logProgress as the logger, Tesseract.js will call this function at various points during the OCR process, providing it with updates (the event) about the progress.
.then((result) => { // Handle the successful OCR result console.log('OCR Result:', result.data.text); }) .catch((error) => { // Handle any errors during the OCR process console.error('OCR Error:', error); });The .then() and .catch() methods are used to handle the result and errors of a promise in JavaScript.
.then((result) => {...}): This block is executed if the promise resolves successfully. In this case, when the OCR process is successful, theresultis passed to the callback function, and you can use it to handle the output (in this case, displaying the recognized text)..catch((error) => {...}): This block is executed if the promise is rejected (i.e., if there is an error during the OCR process). Theerrorparameter contains the details of the error, and you can use it to handle the error, like logging it to the console or displaying a message.
Complete Code :
// Import the Tesseract.js libraryconst T = require('tesseract.js');// Define the image path and language for OCR
const imagePath = ‘./image1.jpeg’;
const language = ‘eng’;
// Define the logger function to track progress
function logProgress(event) {
console.log(event);
}
// Perform the OCR process
T.recognize(imagePath, language, {
logger: logProgress // Use the logger to track progress
})
.then((result) => {
// Handle the successful OCR result
console.log(‘OCR Result:’, result.data.text);
})
.catch((error) => {
// Handle any errors during the OCR process
console.error(‘OCR Error:’, error);
});
We can modify this script if we want display the result on the notepad :
// Import the required librariesconst T = require('tesseract.js');const fs = require('fs'); // Import fs to write to a file// Define the image path and language for OCR
const imagePath = ‘./image1.jpeg’;
const language = ‘eng’;
// Define the logger function to track progress
function logProgress(event) {
console.log(event);
}
// Perform the OCR process
T.recognize(imagePath, language, {
logger: logProgress // Use the logger to track progress
})
.then((result) => {
// Handle the successful OCR result
const ocrText = result.data.text; // Extract OCR result text
console.log(‘OCR Result:’, ocrText);
// Save the result to a .txt file (Notepad)
fs.writeFile(‘ocr_results.txt’, ocrText, (err) => {
if (err) {
console.error(‘Error writing to file:’, err);
} else {
console.log(‘OCR results saved to ocr_results.txt’);
}
});
})
.catch((error) => {
// Handle any errors during the OCR process
console.error(‘OCR Error:’, error);
});
Explanation:
fs.writeFile(): This is used to write the OCR result to a.txtfile. The first parameter is the file name (ocr_results.txt), and the second is the content to be written (the OCR text).- The function checks if there’s an error during the writing process. If there’s no error, it confirms that the results have been saved.
After running this script, you should find a file named ocr_results.txt in your project directory containing the recognized text.
While Tesseract.js works great for browser-based projects, enterprise applications often require server-side processing with better performance and accuracy. If you are building a Node.js backend that needs to hand off OCR to a .NET microservice, or if your project evolves into a full-stack .NET application, IronOCR is a solid option.
using IronOcr;var ocr = new IronTesseract();using var input = new OcrInput();input.LoadImage("typed_text.png");var result = ocr.Read(input);File.WriteAllText("ocr_results.txt", result.Text);IronOCR processes images faster than JavaScript-based solutions for high-volume workloads and includes automatic image enhancement that improves accuracy on typed documents. It supports reading from PDFs, multi-page TIFFs, and even URLs directly.
Information contained on this page is provided by an independent third-party content provider. Frankly and this Site make no warranties or representations in connection therewith. If you are affiliated with this page and would like it removed please contact [email protected]
