Extract Text from Images with JavaScript

Unlocking the Power of Optical Character Recognition with Tesseract.js

Optical Character Recognition (OCR) is a technology that enables computers to extract text from images and videos. One popular JavaScript library for OCR is Tesseract.js, which provides a simple and efficient way to integrate OCR capabilities into web applications. In this article, we’ll explore how to use Tesseract.js to recognize text in images and discuss its benefits and limitations.

Getting Started with Tesseract.js

To add Tesseract.js to your project, simply run the following command in your terminal:

npm install tesseract.js

Once installed, you can import the library into your code and start using its functions.

Recognizing Text in Images

Tesseract.js provides a recognize function that takes an image as input and returns the extracted text. The function also accepts options to specify the language of the text and the level of confidence required for the recognition.

Here’s an example of how to use the recognize function:
“`javascript
const Tesseract = require(‘tesseract.js’);

const img = ‘image.jpg’;
Tesseract.recognize(img, ‘eng’, { logger: m => console.log(m) })
.then(({ data: { text } }) => {
console.log(text);
})
.catch(err => {
console.error(err);
});
“
In this example, we're recognizing the text in an image file calledimage.jpgusing the English language. Thelogger` option is used to log the progress of the recognition process.

Dealing with the Result

The result of the recognize function is an object that contains the extracted text, as well as other information such as the confidence level of the recognition.

Here’s an example of how to extract the text from the result object:
javascript
const text = data.text;
console.log(text);

Marking the Matched Words

To mark the matched words in the image, we need to use the bbox property of the word object, which provides the coordinates of the word in the image.

Here’s an example of how to mark the matched words:
javascript
const words = data.words;
words.forEach(word => {
const x0 = word.bbox.x0;
const y0 = word.bbox.y0;
const x1 = word.bbox.x1;
const y1 = word.bbox.y1;
// Draw a rectangle around the word
ctx.strokeStyle = 'red';
ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
});

In this example, we’re using the bbox property to get the coordinates of each word and then drawing a rectangle around the word using the strokeRect function.

Benefits and Limitations

Tesseract.js provides several benefits, including:

• High accuracy: Tesseract.js has been trained on a large dataset of images and has achieved high accuracy in recognizing text.
• Flexibility: Tesseract.js can be used in a variety of applications, including web applications, mobile applications, and desktop applications.
• Customization: Tesseract.js allows developers to customize the recognition process by specifying the language of the text and the level of confidence required.

However, Tesseract.js also has some limitations, including:

• Limited support for non-English languages: While Tesseract.js supports many languages, it may not perform as well on non-English languages.
• Limited support for handwriting: Tesseract.js is not designed to recognize handwriting and may not perform well on handwritten text.

Conclusion

Tesseract.js is a powerful library for optical character recognition that provides high accuracy and flexibility. It can be used in a variety of applications, including web applications, mobile applications, and desktop applications. However, it also has some limitations, including limited support for non-English languages and handwriting. By understanding the benefits and limitations of Tesseract.js, developers can make informed decisions about when to use it and how to customize it for their specific needs.