Compare Images: 25 Projects in 25 Days

Mostly Similar Images
Mostly Similar Images
Identical Images
Identical Images
Mostly Different Images
Mostly Different Images

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 Amin.

What it Does

This C# WinForms application compares images with various image processing algorithms using LEADTOOLS Version 19.

Features Used

Development Progress Journal

Hello, my name is Amin and I’ll be creating a program that takes two images as input and calculates different measures of similarity between them using various techniques. I will be coding with C# using VS 2010 since its projects can be easily upgraded to later versions of Visual Studio.

First, I’ll start by creating a simple form that loads and displays two images and does a pixel-wise comparison. For that, I’ll use the Leadtools.Controls.ImageViewer control  along  with the Leadtools.Codecs.RasterCodecs.Load method.

To perform comparison, I will use our CombineCommand class with the OperationXor flag, which will zero-out all pixels in the target image that are identical to their counterparts in the source image.

The initial design and comparison code took me almost one hour, but I’m going to modify it a little. Instead of browsing and loading different images every time, I will add a bunch of test images to two combo boxes for ease of loading, and fill the two combo boxes at startup. This change took me another hour to finish.

Now I will add comparison criteria other than exact pixel matching.

The second comparison measure to be implemented is the average intensity of the image. If two bright (or two dark) images are compared this way, they’ll be found similar even if they’re different in all other aspects. This is coded rather quickly thanks to the StatisticsInformationCommand class, which can return the mean (average) of all image pixel intensity values using a couple of lines of code.

The third comparison measure is pixel-by-pixel intensity comparison. This ignores the color contents so a color image will appear similar to a grayscale copy of itself. The implementation is also done quickly thanks to the same CombineCommand class. However, instead of the OperationXor flag I used the AbsoluteDifference flag because I want to compute a similarity value, not just an exact match indicator.

Each of the above two comparisons took about an hour to implement.

The fourth and fifth comparison measures are related to color info and do not depend on the image’s brightness. I will use the ColorSeparateCommand class to obtain Hue and Saturation data for the two images, then use the same statistics command I used before to calculate mean values from these planes.

Since both measures are related, I finished them together in about one hour.

The final comparison to perform will be a frequency domain similarity estimation. To obtain the frequency magnitudes, I’ll use our FastFourierTransformCommand class. Normally, FFT requires the image dimensions to be powers of two, but our function overcomes that using padding, so I used the PadOptimally flag in my code.

I also make sure both images have the same dimensions and resize them if necessary to 256×256 pixels, so that the output frequency data arrays have the same size.

This function alone took close to 3 hours to finish, but without LEADTOOLS, it would have probably taken me several days if not more.

Download the Project

The source code for this sample project can be downloaded from here. To run the project, extract it to the C:\LEADTOOLS 19\Examples\DotNet\CS directory.

Posted in Image Processing | Tagged , , , , , , , , | Leave a comment

Integrate OCR into Web Scanning: 25 Projects in 25 Days

Select Source
Select Source
Start Scanning
Start Scanning
Saving OCRed PDF
Saving OCRed PDF

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 Daoud.

What it Does

This web application will scan documents and convert them to searchable PDF with OCR using LEADTOOLS Version 19.

Features Used

Development Progress Journal

Hello, my name is Daoud and I am going to update our HTML5 REST Services to use OCR on images scanned from our Web Scanning demo and save the OCR result to an image-over-text PDF file.

I am using LEADTOOLS Document Imaging Suite SDK v19 and developing with VS2010 with .NET 4.

I am going to update the EndDocument function of the UploadService.cs file in our Leadtools.RESTServices project. The source code for the REST services is in the Leadtools.RESTServices project and it is shipped along with our HTML5 demos’ source code in the LEADTOOLS SDK. The source code for the original project can be found here:

[LEADTOOLS 19]\Examples\REST\Leadtools.RESTServices

The EndDocument function will append the scanned images to a single file, and if the user selects PDF as the output format, the service will perform OCR on the scanned images.

I used IOcrEngine interface to initialize an instance of the OCR engine and deal with the OCR engine.

Documentation: IOcrEngine

I used IOcrDocument interface to handle the OCR operation inputs and outputs:

Documentation: IOcrDocument

The scanned images are loaded to RasterImage object:

Documentation: RasterImage

I used PdfDocumentOptions class to set the PDF options of the resulting PDF:

Documentation: PdfDocumentOptions

When the client clicks on the "Save to File" button in our HTML5 Scan demo, the scanned images will be sent from the client-side to server-side where the UploadService will be used to create the output file. If the user selected PDF format when he clicked on the "Save to File" button, the service will add the pages to IOcrDocument object and perform OCR then save the result to Image-over-text PDF file and send it back to the client-side.

This application is done and done!  It took me a total of 2 hours to update our service, including testing and debugging.  Without the LEADTOOLS Document Imaging Suite SDK, I cannot even imagine how long a task like this would take.

Download the Project

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

Posted in OCR | Tagged , , , , , , , , , , , , | Leave a comment

Receipt Survey Forms Recognition: 25 Projects in 25 Days

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 Justin.

What it Does

This ASP.NET C# application will utilize Forms Recognition to extract data from a receipt survey using LEADTOOLS Version 19.

Features Used

Development Progress Journal

My name’s Justin I’m going to make a simple ASP.NET that performs Forms Recognition on a restaurant receipt.

Quite a few restaurants hand out receipts with optional surveys on them. Customers are typically required to visit a web page and manually enter in a lengthy survey code included on their receipt. With LEADTOOLS Forms Recognition, customers could, instead, just take a picture of their receipt from their mobile device and begin their surveys immediately.

First, I’ll need a receipt with a survey code on it. Time to head to Taco Bell…

Okay, back from Taco Bell. The receipt that I was given has two areas of interest: a 16-digit survey code, and a 5 digit restaurant code.

I’m going to use our Master Forms Editor demo (C:\LEADTOOLS 19\Shortcuts\Forms Recognition & Processing\.NET Class Libraries\Forms (Structured & Unstructured)\Forms Recognition & Processing\Master Forms Editor) to create a master form for this type of receipt. As noted above, I’ll be adding two form fields: a survey code field, and a restaurant code field.

Template generated. Let’s get programming. I’m going to be using the AutoFormsEngine with the Advantage OCR engine to perform the recognition.

I’ve added the recognition code to the project. Some quick image processing will ensure accurate results across a variety of inputs. I’ll be using the following pre-processing pipeline: Auto-binarization, dilation, and color resolution change to 1 bit per pixel.

Now I just need a basic UI. I’ll use an ASP FileUpload control to upload images to the web server, and I’ll display the results in a table and the uploaded image in an ImageViewer.

The UI is complete. I also added some bells (no pun intended) and whistles to the code-behind so that the recognition function can be easily called via a PageMethod in JavaScript. All done!

Download the Project

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

Posted in Forms Recognition and Processing | Tagged , , , , , , , , , , , | Leave a comment

Reverse Animated GIF: 25 Projects in 25 Days

Open Gif File
Open Gif File
Save Reversed Gif
Save Reversed Gif
Ping Pong Option
Ping Pong Option

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 Aaron.

What it Does

This C# WinForms project will load a multi-page image and reverse the pages to create a reverse-playback GIF using LEADTOOLS Version 19.

Features Used

Development Progress Journal

Hello, my name is Aaron I am going to write a C# WinForms application that will load in a multi-page file (GIF, TIFF, Word, PDF, etc.), reverse the page order, and save the file as a GIF to play the image backwards. The application will also have the ability to “Ping Pong” which is to infinitely play the GIF image back and forth.

I will start with creating the main user interface for the application. I will use the LEADTOOLS RasterPictureBox control to easily allow me to play the animation.

Documentation: RasterPictureBox

I have completed created the main user interface. This took me about 30 minutes to complete. I will now begin implementing loading the GIF image into the RasterPictureBox control and starting the animation.

Documentation: PlayAnimation

I have now completed implementing the loading and playing of the GIF image. I have never used the RasterPictureBox control before so this took some time to research exactly how the control works. This took me about 45 minutes.

I will now begin implementing the reversing of the GIF image itself. To accomplish this I will use the RasterCodecs.Load method to load the pages of the image one-by-one in reverse. I will also be using the CombineCommand to combine the frames to create a “flattened” image for each frame using the GIF specification.

Documentation: CombineCommand

Then I will use the RasterImage.AddPage method to add the combined images to a new RasterImage object.

Documentation: RasterCodecs.Load
Documentation: RasterImage.AddPage

I have now completed implementing the reversal of the GIF image. This took me about 4 hours to complete. I will now begin to implement the “Ping Pong” feature of the application. To accomplish this task I will use the FrameChanged event for the RasterPictureBox control.

Documentation: OnFrameChanged

I have now completed implementing the “Ping Pong” feature of the application. Including fixing a few bugs that I found. This took me about an hour and a half to complete.

My application is nearing completion. I will now begin bug testing and adding clear comments into my code for easier reading.

I have now finished fixing some bugs that I found while bug testing and commenting my code for easier reading. This took me about an hour to complete. My application is now ready to deploy.

It took me a total of 7 hours and forty five minutes to complete my application. Without LEADTOOLS this would have taken weeks or even months to complete.

Download the Project

The source code for this sample project can be downloaded from here. To run the project, extract it to the C:\LEADTOOLS 19\Examples\DotNet\CS directory.

Posted in Image Processing | Tagged , , , , , , , , , | Leave a comment

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.

Posted in OCR | Tagged , , , , , , , , , | Leave a comment