LEADTOOLS OCR in Meteor and Bootstrap: 25 Projects in 25 Days

Meteor OCR Demo Screenshot
Meteor OCR Demo Screenshot
Meteor OCR Demo Screenshot Text from GIF
Meteor OCR Demo Screenshot Text from GIF
Meteor OCR Demo Screenshot Text from JPEG
Meteor OCR Demo Screenshot Text from JPEG
As part of the LEAD Technologies 25th anniversary, we are creating 25 projects in 25 days to celebrate LEAD’s depth of features and ease of use. Today’s project comes from Nathan.

What it Does

This HTML5/JavaScript web application shows how using LEADTOOLS Version 19 can be integrated with other web platforms such as Meteor and Bootstrap.

Features Used

Development Progress Journal

Hello, my name is Nathan I am going to write an application that will demonstrate how easy it is to combine our toolkit with other web platforms. In this case, I will use Meteor.js and Twitter Bootstrap for style.

I have never used Meteor.js before so I am following the tutorial on their page first, then will then integrate it with LEADTOOLS.

The Meteor tutorial took about 30 minutes to follow, and I can now add in our viewer and OCR functionality using our REST Services. OCR is a very difficult task, but with LEADTOOLS it will only take a few lines of code.

Importing external JS files caused some problems since Meteor controls the DOM, so I had to rename the LEADTOOLS libraries so that Leadtools.js would be imported first. That took me 20 minutes to solve.

I am going to start by adding the Image Viewer, which can be achieved with a few lines of code and allow me to view images with mime types that aren’t supported by the browser such as TIFF and JPEG 2000.
Documentation: Displaying Images in HTML5 with LEADTOOLS

Scope seems to be a tricky thing in Meteor. I can’t just declare the Image Viewer at the top of the JS file and use it throughout.

It took me 4 hours or so to solve this issue. It turns out, in my events, I need to pass ‘template’ so that I can access the Image Viewer using the template instance.

I have the viewer working, now I need to make a call to our Raster REST Service in order to display all MIME types. I only had to modify one line of code to achieve this.

Now I am going to add OCR into the program, to do this I think I will create a few server side methods.

The OCR took a couple of hours fiddling with the server and JSON. OCR with LEADTOOLS was another really easy task to accomplish.

Now that I have everything working I think I’ll go back and add in some Bootstrap to make it presentable.

The project took me 7 hours with the scope issues that I ran into and having to learn Meteor from scratch. But without LEADTOOLS the OCR and the viewer would not have been feasible for me to accomplish.

For future improvements to this project, I would like to add a side-by-side view of the results and the viewer, and maybe dive into the functionality of meteor more to see how I could combine it more with LEADTOOLS.

Download the Project

The source code for this sample project can be downloaded from here.

This entry was posted in OCR and tagged , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *