Cleaning Document Images on the Web with AJAX

This is a showcase review for our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

• Download demo - 1.58 MB
• Download a 30 day trial of our web controls today

Introduction

With Atalasoft's DotImage 4.0 release, it's easier than ever to manipulate document images on the web. This article will show you how to use our new Web Image Viewer and Web Thumbnail control to navigate a multi-page TIFF. Then we'll add controls to call clean-up routines with a remote-invoke, our way of editing images on the server and updating the browser without a post-back.

We chose to use AJAX to implement our control, because unlike other rich web user interface technologies, AJAX requires no special security settings or plug-ins, is cross-platform, works well with ASP.NET, and is based on open standards.

You can see a fully finished application here. Figure 1 shows the features that you get when you build a document imaging application with Atalasoft's web controls.

To make it easy to get started, the installer for DotImage will automatically put the WebImageViewer and WebThumbnailViewer into the Visual Studio 2005 Toolbox. Building a simple viewing application is just a matter of dragging them onto your page, and setting up some simple properties.

These instructions are for Visual Studio 2005, but the component works similarly in VS2003.

1. Start Visual Studio 2005 and choose File->New->Web Site� from the main menu.
2. Select ASP.NET Website and choose a location and language (all code samples in this article are in C#).
3. Edit Default.aspx. Put a one row, two column standard HTML table onto the page. Here is the code, if you want to paste into the HTML.

   <table>
    <tr>
     <td></td>
     <td></td>
    </tr>
   </table>

   

4. Go back to the Design tab of Default.aspx and drag a WebThumbnailViewer into the first column of the table and a WebImageViewer into the second column.

   This will automatically add our assemblies into your bin directory.

5. Set the Height of both components to 600, the Width of the WebThumbnailViewer1 to 150 and the Width of WebImageViewer1 to 650. Set the AntialiasDisplay of the WebImageViewer to ScaleToGray.
6. Set the ViewerID property of WebThumbnailViewer1 to WebImageViewer1 (this will keep the viewer in sync with the thumbnail viewer as you change pages).
7. Double-click the page so that you create a Page_Load event handler. Here is the code for it (paste the body into then newly created method):

   protected void Page_Load(object sender, EventArgs e)
   {
     if (!IsPostBack) {
       string imageName = "doc_to_clean.tif";
       string urlPathToCache = ConfigurationManager.
           AppSettings["AtalasoftWebControls_Cache"];
   
       // name file with session id so that the cache manager
   
       // will take over deleting it
   
       string fileName = Page.Session.SessionID + imageName; 
   
       // Copy sample tiff file to the cache
   
       // so we can edit it, overwriting if necessary
   
       File.Copy(Page.MapPath("Images/" + imageName), 
            Page.MapPath(urlPathToCache) + fileName, true); 
   
       // tell the thumbnail and image viewers to open
   
       // the file via its cache URL
   
       WebThumbnailViewer1.OpenUrl(urlPathToCache + fileName); 
       WebImageViewer1.OpenUrl(urlPathToCache + fileName); 
     }
   }

8. Your .cs file will need the following two using statements.

   using System.IO;
   using Atalasoft.Imaging.WebControls;

9. Create a folder named "AtalaCache" in the root of your project. This is where we will keep files as they are being edited.
10. Add the following appSettings into your web.config:

    <appSettings>
      <add key="AtalasoftWebControls_Cache" value="AtalaCache/"/>
      <add key="AtalasoftWebControls_CacheLifeTime" value="30"/>
      <add key="AtalasoftWebControls_CacheFilesOnly" value="True"/>
      <add key="AtalasoftWebControls_ShowClientErrors" value="True"/>
      <add key="AtalasoftWebControls_ErrorLogging" value="True"/>
    </appSettings>

11. Create a folder named "Images" in the root of your project and put a multi-page TIFF in it (named doc_to_clean.tif). If you don't have one, there is one included in the zip attached to this article. This directory will hold our source image.

At this point, you can run the application (make sure Default.aspx is the start page). If all is right, you have a simple AJAX image viewer in a browser. If you choose pages in the WebThumbnailViewer, the WebImageViewer will automatically update.

With this small amount of work we already have a pretty functional viewing application. Moving the scrollbars will load tiles of the image on demand and clicking on the thumbnail will change the image in the viewer. Also, you can view the most popular document image formats, TIFF and PDF, right in the browser without a plugin. In fact, all formats supported by DotImage will be automatically converted to a format that the browser can render.

I want to draw attention to what we did in step 7. Strictly speaking, to get a viewer up, all you have to do is call OpenUrl with the URL of the image. But we are planning on editing the image, so I decided to plan a little ahead and copy the image to the cache, where will be free to edit a copy. By naming the file in the cache with the SessionID as we did, the Atalasoft cache manager will delete the file for us automatically when it is no longer needed.

To add some mouse interactivity and zoom control, all we need to do is add regular Input Buttons (HTML buttons) and call into our client-side JavaScript object (no call to the server is required). Add these lines just above the table in your Default.aspx file.

<input id="PanButton" type="button" value="Pan" 
   onclick="WebImageViewer1.setMouseTool(MouseToolType.Pan);"/>
<input id="ZoomButton" type="button" value="Zoom"
onclick="WebImageViewer1.setAutoZoom(AutoZoomMode.None);
         WebImageViewer1.setMouseTool(MouseToolType.ZoomIn, 
                                      MouseToolType.ZoomOut);"/>
<input id="BestFitButton" type="button" value="Best Fit"  
   onclick="WebImageViewer1.setAutoZoom(AutoZoomMode.BestFit);"/>
<input id="FitToWidthButton" type="button" value="Fit To Width"  
   onclick="WebImageViewer1.setAutoZoom(AutoZoomMode.FitToWidth);"/>
<input id="FullSizeButton" type="button" value="Full Size"  
   onclick="WebImageViewer1.setAutoZoom(AutoZoomMode.None);
            WebImageViewer1.setZoom(1);"/>

Here is what the application looks like now:

Now, it's time to add in some document cleaning.

1. Add this button to Default.aspx:

   <input id="DespeckleButton" type="button" 
          value="Despeckle"   onclick="Despeckle();"/>

2. Add the following JavaScript to Default.aspx. Make sure it is after the WebImageViewer tags.

   <script type="text/javascript">
   
   atalaInitClientScript("OnPageLoad();");
   function OnPageLoad()
   {
     // call Invalidate after every remote invoke
   
     WebImageViewer1.RemoteInvoked = Invalidate;
   }
   
   // called when the remote invoke is done to update the image
   
   function Invalidate()
   {
     WebImageViewer1.Update();
     WebThumbnailViewer1.Update();
   }
   
   // Called by the onclick of the despeckle input button
   
   function Despeckle()
   {
     WebImageViewer1.RemoteInvoke("Despeckle");
   }
   </script>

3. Add the following C# code to your .cs file. This method is called by our component whenever the JavaScript in the previous step is called. This is how you get a server-side action in a DotImage WebControl without a post-back.

   [RemoteInvokable]
   public void Despeckle()
   {
      ApplyAndSave(new DocumentDespeckleCommand());
   }

4. That function requires this code be added to the Default.aspx.cs file as well.

   private void ApplyAndSave(ImageCommand cmd)
   {
       ImageResults res = cmd.Apply(WebImageViewer1.Image);
       SaveChanges(res.Image);
       if (!res.IsImageSourceImage)
       {
         res.Image.Dispose();
       }
   }
   
   private void SaveChanges(AtalaImage img)
   {
       string url = WebImageViewer1.ImageUrl;
       string path = Page.MapPath(url);
       int frame = WebImageViewer1.CurrentPage - 1;
       
       using (Stream fs = new FileStream(path, FileMode.Open))
       {
         TiffFile tFile = new TiffFile();
         tFile.Read(fs);
         TiffDirectory tImage = new 
            TiffDirectory(img, 
            TiffCompression.Group4FaxEncoding);
         tFile.Images.RemoveAt(frame);
         tFile.Images.Insert(frame, tImage);
         tFile.Save(path + "_tmp");
       }
       File.Delete(path);
       File.Move(path + "_tmp", path);
   
       WebImageViewer1.OpenUrl(url, frame);
   }

5. We need to add the following using statements.

   using Atalasoft.Imaging;
   using Atalasoft.Imaging.Codec;
   using Atalasoft.Imaging.Codec.Tiff;
   using Atalasoft.Imaging.ImageProcessing;
   using Atalasoft.Imaging.ImageProcessing.Document;
   using Atalasoft.Imaging.ImageProcessing.Transforms;

Now you have an image viewer that can clean documents, and it's easy to add more commands.

Here are more JavaScript functions � add these buttons:

<input id="DeskewButton" type="button" value="Deskew" 
   onclick="Deskew();"/>
<input id="Rotate90Button" type="button" value="Rotate 90" 
   onclick="Rotate90();"/>

And this JavaScript:

function Deskew()
{        
  WebImageViewer1.RemoteInvoke("Deskew");
}

function Rotate90()
{        
  WebImageViewer1.RemoteInvoke("Rotate90");
}

And here is the code for the Default.aspx.cs file:

[RemoteInvokable]
public void Deskew()
{
    ApplyAndSave(new AutoDeskewCommand());
}

[RemoteInvokable]
public void Rotate90()
{
    ApplyAndSave(new RotateCommand(90.0));
}

DotImage Document Imaging includes over a hundred commands and our Advanced Document Cleanup module adds about another dozen, such as border removal, hole-punch removal, auto-invert, and more.

With Atalasoft's AJAX web controls, it's never been easier to access, view and manipulate document images on the web. Contact Atalasoft directly for more details, or download a 30 day trial of our web controls today.