Click here to Skip to main content
15,861,125 members
Articles / Web Development / ASP.NET

Dynamic DeepZoom ASP.NET User Control using Seadragon

Rate me:
Please Sign up or sign in to vote.
5.00/5 (11 votes)
19 May 2010CPOL4 min read 87.3K   2.3K   10   34
A deepzoom user control doesn't need to generate deepzoom image files

Introduction

I have been trying to make a deepzoom page for my photo album. Most of the deepzoom examples use static deepzoom image files that have to be prepared before use. I did find one example using dynamic deepzoom image generation technique to generate those deepzoom tiles on the fly for Silverlight applications. Then I found that Seadragon uses Ajax in deepzoom so that clients don't even need to download Silverlight runtime. But I couldn't find any example to show how to use dynamic tile images generation method. So I tried to make this by myself.

Background

Image deep zoom technique is used for large image display. Google Map is a good example. It divides an image in a series of zoom levels, for instance from 1 to 13. In those deep zoom levels, the whole image can be very big, i.e. 4000 x 3000 pixels. Since the image view window is normally around 800 x 600 pixels, it is not necessary to load the whole image into memory, especially in a web application. So the big image is cut into smaller tiles, i.e. each 256 x 256 pixels. Deep zoom applications then only load those tiles that make up the display area. This way will make the zooming and pan much faster and more efficient. For more information about deepzoom, you can just Google the keyword “Deepzoom”.

Most of the ASP.NET deepzoom applications use the Silverlight MultiScaleImage component. There are many articles that show you how to use it. Recently I found the Seadragon deepzoom component implemented using AJAX (http://www.seadragon.com/developer/ajax/). Although its zooming and panning is as smooth as Silverlight, I like the way it doesn't need to install Silverlight runtime to work. The typical use of Seadragon is as follows in JavaScript:

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> 

as you can see the code.

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

It needs to open a file “carina-nebula.dzi” in the web application’s root path. The dzi file instructs the Seadragon viewer to load the tile images inside a folder, which includes hundreds or thousands of tile images for different zoom levels. Those tile images have to be prepared and generated by tools such as Microsoft’s Deepzoom composer. If you want to switch to many different images, you have to prepare many sets of these tile images for each of the images. That is a tedious work. Fortunately Seadragon component supports dynamic tile sources. It can be set to send requests to web server asking for tile images. The following code shows how to do so:

JavaScript
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; 

First it creates a tileSource object. The parameters “width and height” indicate your image’s width and height, respectively. The “tileSize” indicates the size of your tile image, normally is 256. “tileOverlap” indicates how many overlapped pixels in between adjacent tile images. Then it defines the tileSource’s method getTileUrl. When Seadragon Deepzoom component needs tile images, it will call the method to get the image URLs from the web server with the parameters “level”, “x” and “y”, which indicates the zoom level, tile’s column and row number, respectively. In my demo web application, I make the ASP.NET web handler GetTileImage.ashx to prepare tile images for the Seadragon Deepzoom component. Therefore, all the tile images are created on the fly. Here is my demo page http://zi01.org/Seadragon/. The test.jpg is a very large image, 17 MB in file size. But you can see the zooming and panning are very fast, since it only loads the portion of the image. In the demo page, you can specify an image URL on the internet if you want to show it in the Deepzoom control.

Using the Code

To make the Seadragon easily to be used in ASP.NET applications, I created a DeepZoom ASP.NET user control to wrap the Seadragon Deepzoom component. So you can just drop the control in your ASP.NET page as many as you want. A page can host a few deepzoom images. You don’t need a JavaScript for each of them. The user control includes two files, DeepZoom.ascx and GetTileImage.ashx.

To use the control, just drop these two files into your ASP.NET Web application or Website projects. And then drag and drop the DeepZoom.ascx into your WebForm. Then in the WebForm’s Page_Load event, assign the image URL to the control. For example, if the DeepZoom control name in your WebForm ASPX page is dzi and you want to show the image test.jpg in your web site’s root directory, the code in the Page_Load event will be:

JavaScript
dzi.imageUrl = "test.jpg" 

Points of Interest

Deepzoom is to put together tile images to make a whole image. Sometimes I can find the merge line in the picture. I am not sure if it is from Seadragon or from the tile images generated in GetTileImage.ashx. If anyone can fix the problem, please let me know. Thanks.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralRe: When sessioState mode is set to "StateServer" Dynamic DeepZoom is not working properly. Pin
Lang Deng23-Jul-10 8:02
Lang Deng23-Jul-10 8:02 
GeneralRe: When sessioState mode is set to "StateServer" Dynamic DeepZoom is not working properly. [modified] Pin
P. Madhu Sudhan Reddy24-Jul-10 3:01
P. Madhu Sudhan Reddy24-Jul-10 3:01 
GeneralRe: When sessioState mode is set to "StateServer" Dynamic DeepZoom is not working properly. Pin
Member 100512715-Dec-10 8:46
Member 100512715-Dec-10 8:46 
GeneralMy vote of 5 [modified] Pin
P. Madhu Sudhan Reddy23-Jul-10 0:42
P. Madhu Sudhan Reddy23-Jul-10 0:42 
GeneralAdd some images and explain more Pin
Narsimlu Keshagouni19-May-10 21:01
professionalNarsimlu Keshagouni19-May-10 21:01 
QuestionNeed explanation Pin
obparis17-May-10 2:37
obparis17-May-10 2:37 
AnswerRe: Need explanation Pin
Lang Deng19-May-10 20:40
Lang Deng19-May-10 20:40 
GeneralMy vote of 1 Pin
Jay Riggs13-May-10 5:13
Jay Riggs13-May-10 5:13 
GeneralNeeds more explanation Pin
Jitendra Zaa13-May-10 1:25
Jitendra Zaa13-May-10 1:25 

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.