Click here to Skip to main content
15,867,308 members
Articles / Web Development / ASP.NET
Article

Cleaning Document Images on the Web with AJAX

1 Nov 20066 min read 57.2K   438   11   5
This article will show you how to use the Atalasoft DotImage AJAX-enabled Web Image Viewer and Web Thumbnail control to navigate multi-page TIFFs, add controls to call clean-up routines, and update the browser without a post-back.

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Image 1This 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.

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.

Image 2

Figure 1: A screen shot of a completed application

  1. Works in any standard browser that supports HTML and JavaScript – no other desktop installation or security settings required
  2. Navigate multipage documents without any code, just associate the thumbnail viewer with an image viewer and the state is kept in synch automatically
  3. Images are scaled to gray to improve the quality.
  4. The image is tiled and only visible tiles are loaded, which uses less bandwidth. Scrolling or panning to other parts of the image loads more tiles on demand.
  5. Integration with the rest of Atalasoft's dotImage Document Imaging toolkit means that automatic document cleaning commands like deskew, despeckle, border and holepunch removal are easily integrated.

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.
    HTML
    <table>
     <tr>
      <td></td>
      <td></td>
     </tr>
    </table>

    Image 3

  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):
    C#
    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.
    C#
    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:
    XML
    <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.

Image 4

Figure 2: A screen shot of the viewer and thumbnail control

  1. You can select thumbnails from the WebThumbnailControl and the WebImageViewer will automatically update.
  2. The WebImageViewer breaks the image into tiles and only loads the visible ones. Scrolling around the image will load tiles on demand.
  3. The WebImageViewer automatically converts images to formats supported by the browser so there is no need for a plugin to view TIFF and PDF right in a browser. Any format supported by DotImage will be converted.

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.

HTML
<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:

Image 5

Figure 3: A screen shot of the viewer and thumbnail control

  1. Pan: Changes the mouse tool so that you can click and drag the image to move it around.
  2. Zoom: Makes left click a zoom in and right click a zoom out.
  3. Best Fit: Fits the entire image into the viewer.
  4. Fit to Width: Changes the size of the image so that its entire width fits in the viewer.
  5. Full Size: Returns the image back to its original size.

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

  1. Add this button to Default.aspx:
    HTML
    <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.
    JavaScript
    <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.
    C#
    [RemoteInvokable]
    public void Despeckle()
    {
       ApplyAndSave(new DocumentDespeckleCommand());
    }
  4. That function requires this code be added to the Default.aspx.cs file as well.
    C#
    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.
    C#
    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:

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

And this JavaScript:

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

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

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

C#
[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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Atalasoft, Inc.
United States United States
Lou Franco is the Director of Engineering at Atalasoft, provider of the leading .NET Imaging SDK (DotImage) and the Document Viewer for SharePoint (Vizit).

http://atalasoft.com/products/dotimage
http://vizitsp.com

Comments and Discussions

 
GeneralHow about same demo with SQL? Pin
tomngs12-May-11 10:00
tomngs12-May-11 10:00 
Can you show how to display all thumbnail like this demo with SQL?
GeneralGetting error while integrating WebThumbnailControl and WebImageViewer in SharePoint Web Part Pin
prashant phutane14-Jan-08 2:28
prashant phutane14-Jan-08 2:28 
GeneralRe: Getting error while integrating WebThumbnailControl and WebImageViewer in SharePoint Web Part Pin
Lou Franco14-Jan-08 4:41
Lou Franco14-Jan-08 4:41 
QuestionWhat about PDFs? Pin
snkscore6-Nov-06 13:31
snkscore6-Nov-06 13:31 
AnswerRe: What about PDFs? Pin
Lou Franco8-Nov-06 5:48
Lou Franco8-Nov-06 5:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.