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

 
QuestionDynamic DeepZoom ASP.NET User Control using Seadragon Pin
Arnab Das from Unknown23-Nov-23 20:58
Arnab Das from Unknown23-Nov-23 20:58 
SuggestionOpenSeadragon Pin
Richard Deeming11-Mar-15 8:27
mveRichard Deeming11-Mar-15 8:27 
QuestionError When the sessionState mode="StateServer" Pin
elston@4gl.in10-Mar-13 20:14
elston@4gl.in10-Mar-13 20:14 
QuestionReg: GetTileImage.LoadImage(value) giving error while publishing Pin
Member 23756674-Mar-13 15:18
Member 23756674-Mar-13 15:18 
QuestionRe: Deep Zoom on load Pin
Member 411560415-Aug-12 8:32
Member 411560415-Aug-12 8:32 
QuestionJquery rotate Pin
danilo.cecilia1-Aug-12 3:22
danilo.cecilia1-Aug-12 3:22 
GeneralMy vote of 5 Pin
Nilesh Patil Kolhapur20-Jan-12 18:58
Nilesh Patil Kolhapur20-Jan-12 18:58 
Questiondeep zoom at imagesurf.net Pin
iimagegrapher23-Nov-11 19:10
iimagegrapher23-Nov-11 19:10 
GeneralMy vote of 5 Pin
Member 96228231-Oct-11 1:02
Member 96228231-Oct-11 1:02 
QuestionError 1 Could not load type 'DeepZoom'. Pin
ashish_168824-Sep-11 8:16
ashish_168824-Sep-11 8:16 
AnswerRe: Error 1 Could not load type 'DeepZoom'. Pin
Deep Makwana26-Sep-11 0:50
Deep Makwana26-Sep-11 0:50 
QuestionFurther Explanation Pin
ABidner6-Sep-11 10:11
ABidner6-Sep-11 10:11 
QuestionLoading image from byte stream Pin
Member 817262023-Aug-11 1:23
Member 817262023-Aug-11 1:23 
AnswerRe: Loading image from byte stream [modified] Pin
Lang Deng23-Aug-11 8:15
Lang Deng23-Aug-11 8:15 
GeneralRe: Loading image from byte stream Pin
Member 817262023-Aug-11 10:12
Member 817262023-Aug-11 10:12 
QuestionUse with VS2008 Pin
Member 817262018-Aug-11 22:21
Member 817262018-Aug-11 22:21 
AnswerRe: Use with VS2008 Pin
zzz111zzz11121-Aug-11 7:25
zzz111zzz11121-Aug-11 7:25 
Questionsome hickups changing tile source on the fly Pin
Member 100512721-Jul-11 10:04
Member 100512721-Jul-11 10:04 
GeneralMy vote of 5 Pin
Roberto Silva Junior12-May-11 10:26
professionalRoberto Silva Junior12-May-11 10:26 
GeneralMultiple Images Pin
lfvideos3-May-11 6:24
lfvideos3-May-11 6:24 
GeneralHello DeepZoom Pin
Member 42040126-Nov-10 14:42
Member 42040126-Nov-10 14:42 
Generalusability in project structure Pin
itrywhatic#25-Oct-10 11:38
itrywhatic#25-Oct-10 11:38 
Generalupdatepanel Pin
magneticadevelopment15-Oct-10 3:18
magneticadevelopment15-Oct-10 3:18 
hi,
is it possible to use it in an updatepanel?
i've tried to but it doesn't work..

maybe i have to call an Update method..?
i'm changing the imageurl synamically after a click on a button.

any idea?
GeneralRe: updatepanel Pin
Member 100512715-Dec-10 8:02
Member 100512715-Dec-10 8:02 
GeneralWhen sessioState mode is set to "StateServer" Dynamic DeepZoom is not working properly. Pin
P. Madhu Sudhan Reddy23-Jul-10 1:07
P. Madhu Sudhan Reddy23-Jul-10 1:07 

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.