使用 AJAX 在 Web 上清理文档图像

这是我们 CodeProject 赞助商的展示评测。这些评测旨在为您提供我们认为对开发者有用的产品和服务信息。

• 下载演示 - 1.58 MB
• 立即下载我们 Web 控件的 30 天试用版

引言

通过 Atalasoft 的 DotImage 4.0 版本，在 Web 上操作文档图像比以往任何时候都更加容易。本文将向您展示如何使用我们新的 Web Image Viewer 和 Web Thumbnail 控件来导航多页 TIFF 文件。然后，我们将添加控件，通过远程调用（我们处理服务器端图像编辑并更新浏览器而不进行回发的方式）来调用清理例程。

我们选择使用 AJAX 来实现我们的控件，因为与其他丰富的 Web 用户界面技术不同，AJAX 不需要特殊的安全设置或插件，它是跨平台的，与 ASP.NET 配合良好，并且基于开放标准。

您可以在 此处 查看一个完整的应用程序。图 1 展示了使用 Atalasoft 的 Web 控件构建文档成像应用程序所获得的功能。

图 1：完成的应用程序的屏幕截图

可在支持 HTML 和 JavaScript 的任何标准浏览器中运行 - 无需其他桌面安装或安全设置 无需任何代码即可导航多页文档，只需将缩略图查看器与图像查看器关联，状态就会自动同步。 图像会被缩放到灰度以提高质量。 图像是分块加载的，只加载可见的块，从而减少了带宽。滚动或平移到图像的其他部分时，会按需加载更多块。 与 Atalasoft 的 dotImage 文档成像工具包的其他部分集成意味着像去歪斜、去噪点、去除边框和打孔等自动文档清理命令易于集成。

为了方便入门，DotImage 的安装程序会自动将 WebImageViewer 和 WebThumbnailViewer 放入 Visual Studio 2005 工具箱。构建一个简单的查看应用程序只需将它们拖到页面上，并设置一些简单的属性。

这些说明适用于 Visual Studio 2005，但该组件在 VS2003 中的工作方式类似。

1. 启动 Visual Studio 2005，然后从主菜单中选择 **文件->新建->网站**…
2. 选择 *ASP.NET 网站*，然后选择一个位置和语言（本文中的所有代码示例均使用 C#）。
3. 编辑 *Default.aspx*。在该页面上放置一个单行两列的标准 HTML 表格。如果您想粘贴到 HTML 中，代码如下。

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

   

4. 回到 *Default.aspx* 的设计视图，将一个 WebThumbnailViewer 拖到表格的第一列，将一个 WebImageViewer 拖到第二列。

   这将自动将我们的程序集添加到您的 *bin* 目录中。

5. 将两个组件的 **Height** 设置为 600，将 WebThumbnailViewer1 的 **Width** 设置为 150，将 WebImageViewer1 的 **Width** 设置为 650。将 WebImageViewer 的 **AntialiasDisplay** 设置为 **ScaleToGray**。
6. 将 WebThumbnailViewer1 的 **ViewerID** 属性设置为 WebImageViewer1（这将使查看器在您更改页面时与缩略图查看器保持同步）。
7. 双击页面，以便创建 **Page_Load** 事件处理程序。代码如下（将主体粘贴到新创建的方法中）。

   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. 您的 *.cs* 文件需要以下两个 using 语句。

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

9. 在项目根目录下创建一个名为“AtalaCache”的文件夹。我们将在编辑过程中将文件保存在这里。
10. 将以下 appSettings 添加到您的 *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. 在项目根目录下创建一个名为“Images”的文件夹，并在其中放置一个多页 TIFF 文件（命名为 *doc_to_clean.tif*）。如果您没有，本文附带的 zip 文件中包含一个。此目录将保存我们的源图像。

此时，您可以运行应用程序（确保 *Default.aspx* 是启动页）。如果一切正常，您将在浏览器中看到一个简单的 AJAX 图像查看器。如果您在 WebThumbnailViewer 中选择页面，WebImageViewer 将自动更新。

图 2：查看器和缩略图控件的屏幕截图

您可以从 WebThumbnailControl 中选择缩略图，WebImageViewer 会自动更新。 WebImageViewer 将图像分割成块，只加载可见的块。滚动图像会按需加载块。 WebImageViewer 会自动将图像转换为浏览器支持的格式，因此无需插件即可在浏览器中直接查看 TIFF 和 PDF。DotImage 支持的任何格式都将被转换。

通过这些少量的工作，我们已经拥有了一个功能相当齐全的查看应用程序。移动滚动条会按需加载图像块，单击缩略图会更改查看器中的图像。此外，您可以在浏览器中直接查看最流行的文档图像格式 TIFF 和 PDF，而无需插件。事实上，DotImage 支持的所有格式都会自动转换为浏览器可以渲染的格式。

我想强调一下我们在第 7 步中所做的事情。严格来说，要启动一个查看器，您只需要调用 OpenUrl 并提供图像的 URL。但我们计划编辑图像，所以我想提前计划一下，并将图像复制到缓存中，在那里我们可以随意编辑副本。通过像我们一样使用 SessionID 为缓存中的文件命名，Atalasoft 缓存管理器将在不再需要文件时自动删除它。

为了添加一些鼠标交互和缩放控件，我们只需要添加常规的输入按钮（HTML 按钮）并调用我们的客户端 JavaScript 对象（无需调用服务器）。将这些行添加到 *Default.aspx* 文件中表格的上方。

<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);"/>

现在的应用程序看起来是这样的。

图 3：查看器和缩略图控件的屏幕截图

平移：更改鼠标工具，以便您可以单击并拖动图像进行移动。 缩放：左键单击放大，右键单击缩小。 最佳匹配：将整个图像适配到查看器中。 宽度匹配：更改图像大小，使其宽度完全适合查看器。 全尺寸：将图像恢复到其原始大小。

现在，是时候添加一些文档清理功能了。

1. 将此按钮添加到 *Default.aspx*。

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

2. 将以下 JavaScript 添加到 *Default.aspx*。确保它位于 WebImageViewer 标签之后。

   <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. 将以下 C# 代码添加到您的 *.cs* 文件中。当 JavaScript 在上一步中被调用时，我们的控件会调用此方法。这就是您在没有回发的情况下在 DotImage WebControl 中实现服务器端操作的方式。

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

4. 该函数需要将此代码也添加到 *Default.aspx.cs* 文件中。

   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. 我们需要添加以下 using 语句。

   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;

现在您拥有了一个可以清理文档的图像查看器，并且可以轻松添加更多命令。

这里有更多的 JavaScript 函数 - 添加这些按钮。

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

以及此 JavaScript。

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

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

这是 *Default.aspx.cs* 文件的代码。

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

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

DotImage Document Imaging 包含一百多个命令，我们的 Advanced Document Cleanup 模块增加了大约十几个命令，如去除边框、去除打孔、自动反转等等。

借助 Atalasoft 的 AJAX Web 控件，在 Web 上访问、查看和操作文档图像从未如此简单。请直接联系 Atalasoft 了解更多详情，或 立即下载我们 Web 控件的 30 天试用版。