Recommended

Skip Navigation LinksHome / Articles / View Article

Deep zooming on the fly

+ Add to SilverlightShow Favorites
16 comments   /   posted by Alexey Zakharov on Jun 15, 2009
(3 votes)
Tags: Deep Zoom , C# , Alexey Zakharov
Categories: Demos , Learn , Tutorials , Misc

1. Introduction

The use of Deep Zoom Composer for creating deep zoom source files is often inconvenient.

For example, one guy has his online shop with thousands of high quality product images and after the release of Silverlight Deep Zoom technology he decided to use it. Surely he can’t decompose his images using Deep Zoom Composer, because due to the amount of existing site images it would take too much time.

And this is not the only case when you want to dynamically generate multi scale image tile source for high quality images without any other preparations.

In this article I’m going to show you one approach, which will let you solve this problem using ASP.NET http handler and a custom deep zoom tile source.

Download source code (Project uses Silverlight 3 beta1).

2. Content

2.1 Solution overview

If you are familiar with ASP.NET you may have already written  http handler for dynamic image resizing. It helps to reduce site traffic, caused by images with high quality. A common solution of that problem is to add a http handler on URIs which refers to files with jpg, gif or png extension. The http handler gets image stream,  resizes it using .NET drawing api and puts the resized image to the output stream. The required size of the image is supplied via query string parameter.

Example: http://mysite.com/images/foo.jpg?width=200&height=300

The same approach I am going to use in my solution. But instead of supplying required image size, I will supply tile level, tile horizontal position, tile vertical position, tile width and tile height parameters which are needed to generate deep zoom tile. So my handler will process URIs like this:

http://mysite.com/images/foo.jpg?tileLevel=0&tilePositionX=0&tilePositionY=0&tileWidth=127&tileHeight=127

Also I will save generated tiles on the disc, which exclude any charges caused by the image decomposition process for further requests.

So we need to create two main classes:

  1. ASP.NET Http handler, which generates deep zoom tiles for specified URI.
  2. Custom deep zoom tile source, which will perform parameterized request to our http handler according to specified image URI.

Let’s start with the http handler.

2.2 Http handler

To create a http handler in asp.net you should implement IHttpHandler interface:

  1. ProcessRequest method -  receives http context object.
  2. IsReusable – indicates whether another request can use the http handler. We will set this property to true, so this class would be used as singleton which is our reason to lock critical sections of our code to avoid threading issues.

First of all we should receive the requested image Uri and tile parameters: 

 1: NameValueCollection queryString = context.Request.QueryString;
 2: int tileLevel = int.Parse(queryString["tileLevel"]);
 3: int tilePositionX = int.Parse(queryString["tilePositionX"]);
 4: int tilePositionY = int.Parse(queryString["tilePositionY"]);
 5: int tileHeight = int.Parse(queryString["tileHeight"]);
 6: int tileWidth = int.Parse(queryString["tileWidth"]);
 7:  
 8: Uri requestedFileUrl = context.Request.Url;

To cache generated deep zoom tiles on the disc I will use the following directory structure:

{ Temp folder }/{ Image name }/{ Tile level }/{ Tile horizontal position }_{ Tile vertical position }.jpg.

You may also store generated tiles in the database. It would be very useful if you are storing the original images in the database too. In this case you can create relation between the table of tiles and the table of original images, which will allow you to create cascade deletion rule to clean up tiles after the deleting of the original image. But for simplicity reasons I won’t use this approach in this article.

After receiving the request, we should first of all check if an image has been already cached by checking existence of the folder with specified image name:

 1: private bool IsTilesExists(HttpContext context, string fileName)
 2: {
 3:     return Directory.Exists(context.Server.MapPath(string.Format("/Temp/{0}", fileName)));
 4: }

If tiles are already cached on the disc we will put them directly to the output stream.

 1: string tilePath = context.Server.MapPath(string.Format("/Temp/{0}/{1}/{2}_{3}.jpg", fileName, tileLevel,
 2:                                                        tilePositionX, tilePositionY));
 3: using (var tileFileStream = new FileStream(tilePath, FileMode.Open))
 4: {
 5:     using (var memoryStream = new MemoryStream())
 6:     {
 7:         for (int i = 0; i < tileFileStream.Length; ++i)
 8:         {
 9:             int readedByte = tileFileStream.ReadByte();
 10:             memoryStream.WriteByte(Convert.ToByte(readedByte));
 11:         }
 12:  
 13:         memoryStream.WriteTo(context.Response.OutputStream);
 14:     }
 15: }

If tiles are still not cached we should create them. Creating and scaling a bitmap object have rather big costs that is why I will create all tiles on the first request to the selected image.

Because of the many requests thet will be performed on the same URI at once, we should create a lock object for each image name. All image locks will be stored in a dictionary, which key is an image name. Access to this dictionary must be also thread safe.

 1: private static readonly Dictionary<string, object> imageLocks = new Dictionary<string, object>();
 2:  
 3: private static readonly object sync = new object();
 4:  
 5: private static void RemoveImageLock(string fileName)
 6: {
 7:     lock (sync)
 8:     {
 9:         imageLocks.Remove(fileName);
 10:     }
 11: }
 12:  
 13: private static object GetImageLock(string fileName)
 14: {
 15:     lock (sync)
 16:     {
 17:         object imageLock;
 18:         if (imageLocks.ContainsKey(fileName))
 19:         {
 20:             imageLock = imageLocks[fileName];
 21:         }
 22:         else
 23:         {
 24:             imageLock = new object();
 25:             imageLocks.Add(fileName, imageLock);
 26:         }
 27:  
 28:         return imageLock;
 29:     }
 30: }

So we are going to create a lock object related to the image file name before the generation of tiles and will release it after the generation process is completed. We should check the existence of cached tile directory twice, because all concurrent threads think that tiles are not cached and will try to cache it once again after acquiring the lock.

 1: if (!IsTilesExists(context, fileName))
 2: {
 3:     lock (GetImageLock(fileName))
 4:     {
 5:         if (!IsTilesExists(context, fileName))
 6:         {
 7:             CreateTiles(context.Request.PhysicalPath,
 8:                         context.Server.MapPath(string.Format("/Temp/{0}", fileName)), tileWidth, tileHeight);
 9:             RemoveImageLock(fileName);
 10:         }
 11:     }
 12: }

Now it is time to generate image tiles. To do it we should:

1. Loop through all possible tile levels. Max tile level will be reached when the ratio of the original image size to 2^(TileLevel) will be less than 1.

2. For each tile level we should scale the original image and split it into tiles of specified size.

Here is the source code of the methods, which perform these tasks.

 1: private void CreateTiles(string imagePath, string tileDirectoryPath, int tileWidth, int tileHeight)
 2: {
 3:     if (!Directory.Exists(tileDirectoryPath))
 4:     {
 5:         Directory.CreateDirectory(tileDirectoryPath);
 6:     }
 7:  
 8:     using (var imageFileStream = new FileStream(imagePath, FileMode.Open))
 9:     {
 10:         using (Image originalImage = Image.FromStream(imageFileStream))
 11:         {
 12:             double tileLevel = 0;
 13:             double scaleRate = originalImage.Width/1;
 14:  
 15:             while (scaleRate > 1)
 16:             {
 17:                 double originalWidth = originalImage.Width;
 18:                 double size = Math.Pow(2, tileLevel);
 19:                 scaleRate = (originalWidth/size) > 1 ? originalWidth/size : 1;
 20:  
 21:                 string tileLevelDirectoryPath = string.Format("{0}/{1}", tileDirectoryPath, tileLevel);
 22:                 if (!Directory.Exists(tileLevelDirectoryPath))
 23:                 {
 24:                     Directory.CreateDirectory(tileLevelDirectoryPath);
 25:                 }
 26:  
 27:                 using (Image scaledImage = ScaleImage(scaleRate, originalImage))
 28:                 {
 29:                     int tilePositionX = 0;
 30:                     for (int i = 0; i < scaledImage.Width; i += tileWidth)
 31:                     {
 32:                         int tilePositionY = 0;
 33:                         for (int j = 0; j < scaledImage.Height; j += tileHeight)
 34:                         {
 35:                             using (Bitmap tileImage = GetTileImage(i, j, tileWidth, tileHeight,
 36:                                                                    scaledImage))
 37:                             {
 38:                                 ImageCodecInfo[] info = ImageCodecInfo.GetImageEncoders();
 39:                                 var encoderParameters = new EncoderParameters(1);
 40:                                 encoderParameters.Param[0] = new EncoderParameter(Encoder.Quality, 100L);
 41:                                 string tilePath = string.Format("{0}/{1}_{2}.jpg", tileLevelDirectoryPath,
 42:                                                                 tilePositionX, tilePositionY);
 43:  
 44:                                 using (var tileFileStream = new FileStream(tilePath, FileMode.OpenOrCreate))
 45:                                 {
 46:                                     tileImage.Save(tileFileStream, info[1], encoderParameters);
 47:                                 }
 48:                             }
 49:  
 50:                             tilePositionY++;
 51:                         }
 52:  
 53:                         tilePositionX++;
 54:                     }
 55:  
 56:                     tileLevel++;
 57:                 }
 58:             }
 59:         }
 60:     }
 61: }
 62:  
 63: private static Bitmap GetTileImage(
 64:     int tileLeft, int tileTop, int tileWidth, int tileHeight, Image scaledImage)
 65: {
 66:     var srcRectnagle = new Rectangle(
 67:         tileLeft,
 68:         tileTop,
 69:         tileLeft + tileWidth < scaledImage.Width
 70:             ? tileWidth
 71:             : scaledImage.Width - tileLeft,
 72:         tileTop + tileHeight < scaledImage.Height
 73:             ? tileHeight
 74:             : scaledImage.Height - tileTop);
 75:  
 76:     var destRectangle = new Rectangle(0, 0, srcRectnagle.Width, srcRectnagle.Height);
 77:  
 78:     var tileImage = new Bitmap(destRectangle.Right, destRectangle.Bottom);
 79:     using (Graphics graphic = Graphics.FromImage(tileImage))
 80:     {
 81:         graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
 82:         graphic.SmoothingMode = SmoothingMode.HighQuality;
 83:         graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
 84:         graphic.CompositingQuality = CompositingQuality.HighQuality;
 85:  
 86:         graphic.DrawImage(scaledImage, destRectangle, srcRectnagle, GraphicsUnit.Pixel);
 87:     }
 88:  
 89:     return tileImage;
 90: }
 91:  
 92: private static Image ScaleImage(double scaleRate, Image originalImage)
 93: {
 94:     var scaleRect = new Rectangle(
 95:         0,
 96:         0,
 97:         Convert.ToInt32(originalImage.Width/scaleRate),
 98:         Convert.ToInt32(originalImage.Height/scaleRate));
 99:  
 100:     Image scaledImage = new Bitmap(scaleRect.Right, scaleRect.Bottom);
 101:     using (Graphics graphic = Graphics.FromImage(scaledImage))
 102:     {
 103:         graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
 104:         graphic.SmoothingMode = SmoothingMode.HighQuality;
 105:         graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
 106:         graphic.CompositingQuality = CompositingQuality.HighQuality;
 107:  
 108:         graphic.DrawImage(
 109:             originalImage,
 110:             scaleRect,
 111:             new Rectangle(0, 0, originalImage.Width, originalImage.Height),
 112:             GraphicsUnit.Pixel);
 113:     }
 114:  
 115:     return scaledImage;
 116: }

Finally we should register our http handler in the web config.

If you are using IIS 6.0 or lower you should add the following line to the httphanlders section:

<add verb="GET,HEAD" path="*.jpg" type="Handlers.DynamicDeepZoomHttpHandler"/> 

For IIS 7.0 - the following line to the handlers section:

<add name="DynamicDeepZoomHttpHandler" verb="GET,HEAD" path="*.jpg" type="Handlers.DynamicDeepZoomHttpHandler"/>

2.3 Custom multi scale tile source

To implement your custom multi scale tile source you should inherit from MultiScaleTileSource, override GetTileLayers method and use base constructor.

To the base constructor we will simply add image URI parameter:

 1: public DynamicDeepZoomSource(int imageWidth, int imageHeight, int tileWidth, int tileHeight, Uri imageUri)
 2:     : base(imageWidth, imageHeight, tileWidth, tileHeight, 0)
 3: {
 4:     this.tileWidth = tileWidth;
 5:     this.tileHeight = tileHeight;
 6:     this.imageUri = imageUri;
 7: }

In the GetTileLayers method we'll generate image tile URIs according to the format which we have specified in the http handler:

 1: protected override void GetTileLayers(
 2:     int tileLevel, int tilePositionX, int tilePositionY, IList<object> tileImageLayerSources)
 3: {
 4:     string orignalString = imageUri.OriginalString;
 5:     string source =
 6:         string.Format(
 7:             "{0}?tileLevel={1}&tilePositionX={2}&tilePositionY={3}&tileWidth={4}&tileHeight={5}",
 8:             orignalString,
 9:             tileLevel,
 10:             tilePositionX,
 11:             tilePositionY,
 12:             tileWidth,
 13:             tileHeight);
 14:  
 15:     var uri = new Uri(source, UriKind.Absolute);
 16:  
 17:     tileImageLayerSources.Add(uri);
 18: }

Now you can open the default deep zoom project generated by the Deep Zoom Composer and replace MultiScaleImage Source property with the created DynamicDeepZoomSource.

 1: msi.Source = new DynamicDeepZoomSource(
 2:                 1024, 768, 127, 127, new Uri(Application.Current.Host.Source, @"../Images/marilyn_monroe.jpg"))

3. Summary

I hope this article will help you to integrate deep zoom to your existing web projects. Now you can make all of the existing images on your website zoomable. It will also reduce your overall traffic, because all high quality images are scaled to smaller size according to the default zoom level.

4. Links

Here are some useful links, which will be a good start to learn something more about creating custom multi scale image source and http handlers:

  1. Virtutal earth deep zooming – you can learn more about custom multi scale image source in my article about using deep zoom for browsing virtual earth maps.
  2. 20 Image Resizing Pitfalls – Nathanael Jones describes some issues connected to image resizing in .NET.
  3. Image resizing hanlder – Here Jigar Desai describes how you can resize images using ASP.NET http handler.

 

 

Share


Comments

Comments RSS RSS

  • RE: Deep zooming on the fly  

    posted by lexer on Jun 15, 2009 13:31
    I haven't used any Silverlight 3 specific feature in this article. So it would also work with Silverlight 2.

  • RE: Deep zooming on the fly  

    posted by John on Jun 17, 2009 10:00

    Next step is to do some caching, imagine you had a 2MB image and had 100 people asking for 100x100 tiles, you would load the 2MB image into memory 10,000 times.

    That said this is an awesome way to get a bunch of small images into the MSI control, which is exactly what you said in the intro. Good work!

  • RE: Deep zooming on the fly  

    posted by krudo meir on Jun 17, 2009 10:23

    Hi,

    links for examples are borken :(
    Great job here!

     

  • RE: Deep zooming on the fly  

    posted by Alexey Zakharov on Jun 17, 2009 10:57
    >> Next step is to do some caching, imagine you had a 2MB image and had 100 people asking for 100x100 tiles, you would load the 2MB image into memory 10,000 times.

    It already solved. I'm locking image while decomposing, that is why for 100 people it would be done only once.

  • RE: Deep zooming on the fly  

    posted by Alexey Zakharov on Jun 17, 2009 11:00
    >> links for examples are borken :(

    It is fake links. It is not an example.

  • RE: Deep zooming on the fly  

    posted by John on Jun 24, 2009 08:59

    How did I miss that! very good.

    Having done something similar in Azure I just wonder how well this will work in the real world. I had serious problems with images that took up more then the 512MB memory allocated - large satellite images from NASA. The benifit of the Azure solution was it was one image per machine. How do you handle running out of memory if you're dealing with large images and many new requests?

    Most deep zoom dynamic tile solutions I've seen proposed are window services listening for new files to be dropped into a folder and then tile them up in advance of the web application. This kind of strategy can also detect when an image is modified and update the tiles accordingly. That said I can see the benifits in having it inside your asp.net application.

  • RE: Deep zooming on the fly  

    posted by David on Aug 07, 2009 11:08

    Hi John,

    Where have you seen the other dynamic tile solutions?

    Thanks

  • RE: Deep zooming on the fly  

    posted by Marthinus on Aug 20, 2009 18:38

    Hi there,

    Im working on a Proof of COncept regarding silverlight. I am especially wanting to proof the use of DeepZoom. I want to annotate for instance a rectangle on a particular image within the multi-image group. The problem I currently have is that the animation of the deepzoom, and my resizing and moving of the rectangle gets out of sync and then it just doesnt look that good.

    Please see a primitive example here:
    http://martycode.blogspot.com/2009/06/testing-my-deepzoom-page.html

    Do you have any ideas as to how to fix this. I need to work on it ASAP :) Thanks a lot.

    PS: I was thinking of maybe adding an INK-type overlay on each sub-image - how can I overwrite the sub-images and keep annimation in sync...

    Go well,
    Marthinus

  • RE: Deep zooming on the fly  

    posted by AE on Aug 24, 2009 18:19
    Is it possible to use this example to deep zoom images not stored locally, but speciyfing their url ? (for example: http://www.ole.clarin.com/diario/2009/08/23/futbollocal/thumb/mdayan_rc1.jpg)

     Thanks and great job!

  • RE: Deep zooming on the fly  

    posted by AE on Aug 24, 2009 18:21
    Is it possible to use this example to deep zoom images not stored locally, but speciyfing their url ? (for example: http://www.ole.clarin.com/diario/2009/08/23/futbollocal/thumb/mdayan_rc1.jpg)

     Thanks and great job!

  • RE: Deep zooming on the fly  

    posted by AE on Aug 24, 2009 18:27
    Is it possible to use this example to deep zoom images not stored locally, but speciyfing their url ? (for example: http://www.ole.clarin.com/diario/2009/08/23/futbollocal/thumb/mdayan_rc1.jpg)

     Thanks and great job!

  • RE: Deep zooming on the fly  

    posted by lexer on Aug 24, 2009 21:06
    I think yes.. you should rewrite some code using WebClient which will download external image.

  • RE: Deep zooming on the fly  

    posted by Adrian Eidelman on Aug 31, 2009 01:01
    Hi Alexey, I've implemented the image url deepzoom taking your suggestion, thanks. One more question: should the tile image size be determined from the image actual size? Or is this independent? Thanks again.

  • RE: Deep zooming on the fly  

    posted by Adrian Eidelman on Aug 31, 2009 01:09
    Hi Alexey, I've implemented the image url deepzoom taking your suggestion, thanks. One more question: should the tile image size be determined from the image actual size? Or is this independent? Thanks again.

  • RE: Deep zooming on the fly  

    posted by Juan on Sep 03, 2009 15:40
    Works fine for certain image sizes, but not all are displayed correctly. Why's that?

     Thanks


  • RE: Deep zooming on the fly  

    posted by Al on Sep 25, 2009 17:15
    Really nice example and exact what I was looking for, great job - thanks!

Add Comment

 
 

   
 
 
  
   
Please add 5 and 8 and type the answer here:

Help us make SilverlightShow even better and win a free t-shirt. Whether you'd like to suggest a change in the structure, content organization, section layout or any other aspect of SilverlightShow appearance - we'd love to hear from you! Need a material (article, tutorial, or other) on a specific topic? Let us know and SilverlightShow content authors will work to have that prepared for you. (hide this)