本文主要介绍如何利用.NET图像处理开发包DotImage创建一个包含了嵌入式Web文档查看器的Web页面以及如何在Web页面中显示初始文件。
创建项目
在VS中,通过ASP.NET Empty Web Site 模板创建一个网页。随即,打开项目的属性页,设置必要的参数和项目。需要注意以下两点:
在 References 菜单中,添加一个新的引用到Atalasoft DotImage WebControls (.NET 2.0)。DotImage 10.0提供了该WebControls,在你安装DotImage 10.3.1后,依赖自动包含在项目中
在Build菜单中,将框架改为.NET Framework 3.5,然后重新打开项目,并迁移web.config。
新增项目资源
项目需要Web文档查看器资源的副本文件,包括客户端JavaScript和样式。DotImage 10.0自带该资源,默认情况下位于: C:\Program Files (x86)\Atalasoft\DotImage 10.0\bin\2.0\x86\WebResources\WebDocViewer。
将WebDocViewer 目录复制到项目根目录。
此外,我们还将创建一个默认的位置用于储存查看器中显示的图片。在项目的根目录下创建一个Images目录,然后将所选择的图像或文件添加到该目录下。本文以Example.tif图像为例。
添加Handler
连接文档查看器与网站上的独立处理器。
在项目中新增一个Generic Handler,文件名假设为WebDocViewer.ashx。Visual Studio中新增一个Web处理器的默认实现方式。用下列代码替换掉文件的全部内容:
<%@ WebHandler Language="C#" Class="WebDocViewerHandler" %>
using System;
using System.Web;
using Atalasoft.Imaging.WebControls;
public class WebDocViewerHandler : WebDocumentRequestHandler
{
}
添加网页
假设我们在本文中添加网页为Default.aspx. Visual Studio将会为该文件
自动创建这个名为Default.aspx.cs中的代码隐藏。
Web文档查看器需要3块代码分别用于加载资源,创建显示区域以及初始化该区域。
在文档的顶部添加下列HTML代码,从而加载所需资源以创建Web文档查看器对象。
<script src="WebDocViewer/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="WebDocViewer/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="WebDocViewer/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="WebDocViewer/atalaWebDocumentViewer.js" type="text/javascript"></script>
<link href="WebDocViewer/atalaWebDocumentViewer.css" rel="Stylesheet" type="text/css" />
接下来,在文档的body中添加下列HTML代码,从而创建文档显示区域。你可以自定义DIV标签。在本示例中,页面的高度和宽度受到限制。
<div id="_toolbar1" class="atala-document-toolbar" style="width: 670px;"></div>
<div id="_container1" class="atala-document-container" style="width: 670px; height: 500px;"></div>
最后,下列JavaScript代码可初始化查看器。构造函数接受影响查看器行为和初始状态的所有配置。最低配置将提示何处应该创建查看器,何处应该放置Web处理器以及最初应显示何种图像。
<script type="text/javascript" language="javascript">
var _docUrl = 'Images/Example.tif';
var _serverUrl = 'WebDocViewer.ashx';
var _viewer = new Atalasoft.Controls.WebDocumentViewer({
'parent': $('#_container1'), // parent container to put the viewer in
'toolbarparent': $('#_toolbar1'), // parent container to put the viewer toolbar in
'serverurl': _serverUrl, // server handler url to send p_w_picpath requests to
'documenturl': _docUrl // document url relative to the server handler url
});
</script>
部署到IIS
此时此刻,网站已准备就绪。如果您要部署到IIS,需要注意一下几点:
将项目复制到IIS文档根目录下。
获取DotImage服务器授权,将授权文件置于项目的Bin目录。
在IIS Manager中,将你的项目目录转换到应用程序,并将其分配到Application Pool。
检查所使用Application Pool的设置,确定Enable 32-Bit Applications设置为“True”,Managed Pipeline Mode设置为Classic。
此时,你便可以在浏览器中查看你的所加载的文件。