OCR JavaScript – Extract text from image effortlessly
In today’s digital era, the ability to extract meaningful text from images is a highly sought-after functionality. Optical Character Recognition (OCR) plays a crucial role in transforming printed or handwritten text into editable and searchable formats. While OCR technology has been around for a while, the advent of JavaScript libraries like Ocrad.js has made it easier than ever to incorporate OCR capabilities directly into web applications. In this article, we will explore Ocrad.js and its features, highlighting how it enables developers to leverage OCR functionality in JavaScript. And also, we will compare it with another OCR JavaScript library Tesseract.js.
OCR javascript demo
GitHub repository
You can download the complete code of the above demo in the link below:
Implementation
Did you find the demo intuitive to use? Were you able to extract text accurately from your choosen images? We would love to hear your thoughts and experiences!
In this article, let’s explore the Ocrad.js library and its capabilities for optical character recognition in JavaScript. I would provide a step-by-step implementation guide for using Ocrad.js in a web application to extract text from images. Furthermore, we would also discuss its key features, including real-time OCR, language support, and configurable parameters.
# Step 1 : Include ocrad.js
To begin, create a new directory for your web application project. Open your preferred text editor or integrated development environment (IDE) and create the necessary files: index.html and style.css. Ensure that you have the Ocrad.js library by either downloading it or linking it via a Content Delivery Network (CDN). Here’s an example of linking it via CDN in the <head> section of index.html
<html>
<head>
<script src='https://cdn.jsdelivr.net/npm/ocrad.js/ocrad.js'></script>
</head>
If you are using npm, you can also install it by running the command below
npm i ocrad.js
At the end of the <body>, include the main javascript file ocrad-demo.js
<script src="js/ocrad-demo.js"></script>
</body>
</html>
# Step 2 : Create html element
Next, in index.html, create the HTML elements below
- Image File selector
- Thumbnail preview of image selected
- Placeholder of text extraction result
<input type="file" id="file-1" class="inputfile" />
<img id="selected-image" src="" />
<div id="log">
<span id="startPre">
<a id="startLink">Click here to recognize text in the demo</a>
<br/> or choose your own image
</span>
</div>
# Step 3 : Event listener for image load
Now, it’s time to add the JavaScript code that handles the OCR functionality. In ocrad-demo.js, we’ll create an event listener for the image file select input element, when the image is loaded, we can call the runOCR() function passing the image data.
$( document ).ready(function() {
var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
input.addEventListener( 'change', function( e )
{
let reader = new FileReader();
reader.onload = function () {
let dataURL = reader.result;
$("#selected-image").attr("src", dataURL);
var img = new Image();
img.src = dataURL;
img.onload = function(){
runOCR(img);
}
}
let file = this.files[0];
reader.readAsDataURL(file);
});
});
});
# Step 4 : Run OCR and Display result
Ocrad.js provided a simple function OCRAD() to extract text from image, after that you can simply display the text in the placeholder of the result element.
function runOCR(image_data){
var txt = OCRAD(image_data);
//Display OCR result
var log = document.getElementById('log');
var line = document.createElement('div');
var pre = document.createElement('pre');
pre.appendChild(document.createTextNode(txt.replace(/\n\s*\n/g, '\n')));
line.innerHTML = '';
line.appendChild(pre);
log.innerHTML = '';
log.insertBefore(line, log.firstChild);
}
Voila! Simple and easy, you have successfully implemented Ocrad.js for text extraction in your web application.
Ocrad.js vs Tesseract.js
In one of my previous article below, I introduced another OCR JavaScript library Tesseract.js
OCRad.js and Tesseract.js are two popular JavaScript libraries that bring OCR capabilities to the browser. In the section below, we will delve into the features, pros, and cons of OCRad.js and Tesseract.js, providing you with insights to help you choose the right library for your OCR needs.
OCRad.js Pros
OCRad.js is an open-source OCR library that relies on the OCR engine, OCRopus, to perform character recognition. Here are some notable advantages of OCRad.js:
- Simplicity: OCRad.js is designed to be lightweight and easy to use. It offers a simple API, making it accessible for developers with various skill levels.
- Real-time OCR: OCRad.js excels at real-time OCR tasks, allowing you to process images on the fly. This makes it suitable for applications that require immediate text extraction.
- Language Support: OCRad.js supports multiple languages, which is crucial for international applications. It provides character recognition for a diverse range of scripts.
OCRad.js Cons
Despite its advantages, OCRad.js does have some limitations:
- Accuracy: OCRad.js might not provide the same level of accuracy as some other OCR libraries. While it performs reasonably well, it might struggle with complex or low-quality images.
- Limited Documentation: OCRad.js lacks comprehensive documentation and examples, which can make it challenging for developers to get started or troubleshoot issues.
- Dependency on OCRopus: OCRad.js relies on OCRopus as its underlying engine. As OCRopus is a less popular OCR engine compared to Tesseract, it might have fewer community resources and support available.
Tesseract.js Pros
Tesseract.js, on the other hand, is a widely adopted OCR library that wraps the Tesseract OCR engine into a JavaScript API. Let’s explore its advantages:
- Accuracy: Tesseract is renowned for its accuracy in OCR tasks. Tesseract.js inherits this trait, making it a suitable choice for applications that prioritize precise text extraction.
- Robust Documentation: Tesseract.js boasts comprehensive documentation and a vibrant community. It provides a wealth of examples, tutorials, and support forums, enabling developers to quickly integrate OCR capabilities into their projects.
- Pre-Trained Models: Tesseract.js offers a collection of pre-trained models for different languages and scenarios. These models cover a wide range of text recognition scenarios, enhancing accuracy and reducing training time.
Tesseract.js Cons
Despite its strengths, Tesseract.js also has a few drawbacks:
- Performance: Tesseract.js can be relatively slower compared to OCRad.js, especially when processing large or high-resolution images. This can impact real-time OCR applications that require swift processing.
- Larger Size: Tesseract.js, being more feature-rich, comes with a larger file size. This can result in longer loading times for web applications, particularly on slower networks.
- Resource Intensive: Tesseract.js requires more computational resources, including CPU power and memory, to perform OCR tasks efficiently. It might not be suitable for resource-constrained environments.
Conclusion
Choosing between OCRad.js and Tesseract.js depends on your specific OCR requirements and priorities. If simplicity, real-time processing, and multi-language support are crucial, OCRad.js might be a viable choice. On the other hand, if accuracy, comprehensive documentation, and a wide range of pre-trained models are your priorities, Tesseract.js should be your go-to library.
Consider the nature of your project, image quality, performance requirements, and available resources when making a decision.
Thank you for reading. If you like this article, please share on Facebook or Twitter. Let me know in the comment if you have any questions. Follow me on Medium, GitHub and Linkedin. Support me on Ko-fi.