Zoomify: Looking for the whole picture

Many of you used Google or Yandex maps to view satellite images of the earth, but not many thought about how these data are stored on servers, because if the user downloaded even individual photos, he would need a very impressive channel. Therefore, these images are processed and cut into separate small pieces.

In this topic, I will talk about one of the implementations and how to glue the Zoomify image so that it is immediately clear what is being said, you can follow the link: $ 2 .
')
About half a year ago, I wrote a utility for converting a picture into a Zoomify image, even though there was a free proprietary utility at that time, and Photoshop has this functionality, but it required batch processing, sending via ftp and some other features. After some time I needed to do the inverse functionality, this is what this topic will be about.

Why do you need it?

The link above pointed to a page with a picture of 2 dollars, I glued this image and the size turned out to be more than 100 megabytes (7500 x 6500 pixels), of course, I did not squeeze it, but in any case the size will be impressive. I think that few could wait for the download of this image, especially if they do not need super detailing or are just interested in some piece. With satellite maps everything is much sadder, for example, the size of Minsk is more than 4 GB (I don’t remember the exact figure, Google’s cache was once saved on the hard drive without a maximum increase).

I will talk about how to glue the picture, but as you can see, the inverse actions are completely based on the algorithms that will be described later with an example implementation in C #.

How it works?

In order not to stretch the article, I will immediately begin to describe the implementation mixed with theory. We launch Fiddler and go to the page with two dollars (I cleared the browser cache so that the files are downloaded over the network again and displayed in Fiddler).



The picture shows that the page is loaded, after which the flash application (ZoomifyViewer.swf) and ImageProperties.xml for the 2DollarBill image is loaded. All images are stored in separate folders on the server, so ImageProperties.xml is always called the same. Flash viewer loads the file ImageProperties.xml, after which it begins to load the pieces. What does it contain that he immediately knows what to ship?

< IMAGE_PROPERTIES WIDTH ="7500" HEIGHT ="6500" NUMTILES ="1052" NUMIMAGES ="1" VERSION ="1.8" TILESIZE ="256" />

* This source code was highlighted with Source Code Highlighter .

As you can see, there is not a single link to the pictures, although the viewer has loaded more than ten pictures. Let's sort the parameters in order:

WIDTH = "7500" - the width of the source image
HEIGHT = "6500" - the height of the original image
NUMTILES = "1052" - the number of the resulting pieces
NUMIMAGES = "1" - the number of images
VERSION = "1.8" - version
TILESIZE = "256" - the size of the piece



How these parameters can bring us closer to the links you ask. Here the most interesting begins:
TileGroup0 is a folder, as soon as 256 files appear in the folder, a new folder is created (TileGroup1, etc.)
0-0-0.jpg - the first zero is the level (the minimum picture that fits in 256 * 256), the second and third are the array (the column and the line respectively, as in most programming languages, the numbering starts from zero)

Algorithm

We calculate how many times you need to reduce the image so that it fits into the square of 256 * 256, for this we divide the original image by 2. As a result, we get 234 * 203 pixels and the level is 6. Here the viewer window is quite large, so the third level was taken at once, and the first went to the navigation. We need to immediately take the maximum level, divide the image into pieces and start downloading them, after which we can glue them together and enjoy the result.

Total

As it seems to me, I described everything in some detail, in addition I attach the code, so there should be no questions. In any case, I will be glad to answer your questions, if any. Under the debugger, I looked at quite a few sites and from the larger principles are the same everywhere with a few amendments, but I think that now you know where to dig.

Project for Visual Studio 2010, C # implementation language: download

Links

Official site
The document, which contains the theory and reference to the Python generation generation