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:
<!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;
}
</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:
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:
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.
