65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Seadragon 的动态 DeepZoom ASP.NET 用户控件

Lang Deng
starIconstarIconstarIconstarIconstarIcon

5.00/5 (9投票s)

2010年5月13日

CPOL

4分钟阅读

viewsIcon

95826

downloadIcon

2275

DeepZoom 用户控件不需要生成 deepzoom 图像文件

引言

我一直在尝试为我的相册制作一个 deepzoom 页面。大多数 deepzoom 示例使用静态 deepzoom 图像文件，这些文件必须在使用前进行准备。我确实找到了一个使用动态 deepzoom 图像生成技术的示例，可以为 Silverlight 应用程序动态生成这些 deepzoom 瓦片。然后我发现 Seadragon 在 deepzoom 中使用 Ajax，这样客户端甚至不需要下载 Silverlight 运行时。但是，我找不到任何示例来展示如何使用动态瓦片图像生成方法。所以我试着自己制作了这个。

背景

图像 deep zoom 技术用于大图像显示。谷歌地图就是一个很好的例子。它将图像分成一系列缩放级别，例如从 1 到 13。在这些 deep zoom 级别中，整个图像可能非常大，即 4000 x 3000 像素。由于图像视图窗口通常约为 800 x 600 像素，因此没有必要将整个图像加载到内存中，尤其是在 Web 应用程序中。因此，大图像被切割成更小的瓦片，即每个 256 x 256 像素。然后，Deep zoom 应用程序只加载构成显示区域的那些瓦片。这样可以使缩放和平移更快、更高效。有关 deepzoom 的更多信息，您可以 Google 关键词“Deepzoom”。

大多数 ASP.NET deepzoom 应用程序使用 Silverlight MultiScaleImage 组件。有很多文章向您展示如何使用它。最近我发现了使用 AJAX 实现的 Seadragon deepzoom 组件 (http://www.seadragon.com/developer/ajax/)。虽然它的缩放和平移与 Silverlight 一样流畅，但我喜欢它不需要安装 Silverlight 运行时即可工作的方式。Seadragon 的典型用法如下，在 JavaScript 中

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://seadragon.com/ajax/0.8/seadragon-min.js">
</script>
<script type="text/javascript">
var viewer = null;

function init() {
   viewer = new Seadragon.Viewer("container");
   viewer.openDzi("carina-nebula.dzi");
}

Seadragon.Utils.addEvent(window, "load", init);
</script>

<style type="text/css">
#container
{
   width: 500px;
   height: 400px;
   background-color: black;
   border: 1px solid black;
   color: white; /* for error messages, etc. */
}
</style>

</head>
<body>
   <div id="container"></div>
</body>
</html>

如您所见，代码。

viewer.openDzi("carina-nebula.dzi");

它需要在 Web 应用程序的根路径中打开一个文件“carina-nebula.dzi”。 dzi 文件指示 Seadragon 查看器加载文件夹中的瓦片图像，该文件夹包括数百或数千个不同缩放级别的瓦片图像。这些瓦片图像必须由诸如微软的 Deepzoom composer 等工具进行准备和生成。如果您想切换到许多不同的图像，则必须为每个图像准备多组这些瓦片图像。这是一项繁琐的工作。幸运的是，Seadragon 组件支持动态瓦片源。它可以设置为向 Web 服务器发送请求以获取瓦片图像。以下代码显示了如何执行此操作

var tileSouce = new Seadragon.TileSource(width, height, tileSize, tileOverlap); 
tileSource.getTileUrl = function (level, x, y) 
{return "GetTileImage.ashx?level=" + level + "&x=" + x + "&y=" + 
y +"&tileSize=" + tileSize + "&tileOverlap=" + tileOverlap + "&photo=" + imageUrl;

首先，它创建一个 tileSource 对象。参数“width 和 height”分别表示您图像的 width 和 height。 “tileSize”表示您的瓦片图像的大小，通常为 256。 “tileOverlap”表示相邻瓦片图像之间重叠的像素数。然后，它定义 tileSource 的方法 getTileUrl。当 Seadragon Deepzoom 组件需要瓦片图像时，它将调用该方法从 Web 服务器获取图像 URL，并带有参数“level”、“x”和“y”，分别表示缩放级别、瓦片的列号和行号。在我的演示 Web 应用程序中，我制作了 ASP.NET Web 处理程序 GetTileImage.ashx 来为 Seadragon Deepzoom 组件准备瓦片图像。因此，所有瓦片图像都是动态创建的。这是我的演示页面 http://zi01.org/Seadragon/。 test.jpg 是一张非常大的图像，文件大小为 17 MB。但是您可以看到缩放和平移非常快，因为它只加载了图像的一部分。在演示页面中，如果您想在 Deepzoom 控件中显示它，您可以指定一个图像 URL。

Using the Code

为了使 Seadragon 更容易在 ASP.NET 应用程序中使用，我创建了一个 DeepZoom ASP.NET 用户控件来包装 Seadragon Deepzoom 组件。因此，您可以在 ASP.NET 页面中随意放置控件。一个页面可以托管几个 deepzoom 图像。您不需要为每个图像编写 JavaScript。用户控件包括两个文件，DeepZoom.ascx 和 GetTileImage.ashx。

要使用该控件，只需将这两个文件放入您的 ASP.NET Web 应用程序或网站项目中。然后将 DeepZoom.ascx 拖放到您的 WebForm 中。然后在 WebForm 的 Page_Load 事件中，将图像 URL 分配给控件。例如，如果您的 WebForm ASPX 页面中的 DeepZoom 控件名称是 dzi，并且您想在您网站的根目录中显示图像 test.jpg，则 Page_Load 事件中的代码将是

dzi.imageUrl = “test.jpg”

关注点

Deepzoom 是将瓦片图像组合在一起以构成一个完整的图像。有时我可以在图片中找到合并线。我不确定这是否来自 Seadragon 或来自在 GetTileImage.ashx 中生成的瓦片图像。如果有人可以解决这个问题，请告诉我。谢谢。

© . All rights reserved.