Click here to Skip to main content
15,304,157 members
Articles / Web Development / ASP.NET
Posted 13 May 2010


10 bookmarked

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
A deepzoom user control doesn't need to generate deepzoom image files


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.


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 ( 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:

<!DOCTYPE html>

<script type="text/javascript" src="">
<script type="text/javascript">
var viewer = null;

function init() {
   viewer = new Seadragon.Viewer("container");

Seadragon.Utils.addEvent(window, "load", init);

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

   <div id="container"></div>

as you can see the code.


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:

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 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:

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.


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


About the Author

Lang Deng
Web Developer
United States United States
No Biography provided

Comments and Discussions

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
Memberelston@4gl.in10-Mar-13 20:14 
QuestionReg: GetTileImage.LoadImage(value) giving error while publishing Pin
Member 23756674-Mar-13 15:18
MemberMember 23756674-Mar-13 15:18 
QuestionRe: Deep Zoom on load Pin
Member 411560415-Aug-12 8:32
MemberMember 411560415-Aug-12 8:32 
QuestionJquery rotate Pin
danilo.cecilia1-Aug-12 3:22
Memberdanilo.cecilia1-Aug-12 3:22 
GeneralMy vote of 5 Pin
Nilesh Patil Kolhapur20-Jan-12 18:58
MemberNilesh Patil Kolhapur20-Jan-12 18:58 
Questiondeep zoom at Pin
iimagegrapher23-Nov-11 19:10
Memberiimagegrapher23-Nov-11 19:10 
GeneralMy vote of 5 Pin
Member 96228231-Oct-11 1:02
MemberMember 96228231-Oct-11 1:02 
QuestionError 1 Could not load type 'DeepZoom'. Pin
ashish_168824-Sep-11 8:16
Memberashish_168824-Sep-11 8:16 
AnswerRe: Error 1 Could not load type 'DeepZoom'. Pin
Deep Makwana26-Sep-11 0:50
MemberDeep Makwana26-Sep-11 0:50 
QuestionFurther Explanation Pin
ABidner6-Sep-11 10:11
MemberABidner6-Sep-11 10:11 
QuestionLoading image from byte stream Pin
Member 817262023-Aug-11 1:23
MemberMember 817262023-Aug-11 1:23 
AnswerRe: Loading image from byte stream [modified] Pin
Lang Deng23-Aug-11 8:15
MemberLang Deng23-Aug-11 8:15 
GeneralRe: Loading image from byte stream Pin
Member 817262023-Aug-11 10:12
MemberMember 817262023-Aug-11 10:12 
QuestionUse with VS2008 Pin
Member 817262018-Aug-11 22:21
MemberMember 817262018-Aug-11 22:21 
AnswerRe: Use with VS2008 Pin
zzz111zzz11121-Aug-11 7:25
Memberzzz111zzz11121-Aug-11 7:25 
Questionsome hickups changing tile source on the fly Pin
Member 100512721-Jul-11 10:04
MemberMember 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
Memberlfvideos3-May-11 6:24 
GeneralHello DeepZoom Pin
Member 42040126-Nov-10 14:42
MemberMember 42040126-Nov-10 14:42 
Generalusability in project structure Pin
itrywhatic#25-Oct-10 11:38
Memberitrywhatic#25-Oct-10 11:38 
Generalupdatepanel Pin
magneticadevelopment15-Oct-10 3:18
Membermagneticadevelopment15-Oct-10 3:18 
GeneralRe: updatepanel Pin
Member 100512715-Dec-10 8:02
MemberMember 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
MemberP. Madhu Sudhan Reddy23-Jul-10 1:07 
GeneralRe: When sessioState mode is set to "StateServer" Dynamic DeepZoom is not working properly. Pin
Lang Deng23-Jul-10 8:02
MemberLang Deng23-Jul-10 8:02 

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.