Многие из Вас использовали карты гугла или яндекса, для того, чтобы посмотреть спутниковые снимки земли, но не многие задумывались каким образом данные снимки хранятся на серверах, ведь если бы пользователь скачивал даже отдельные фотографии, то ему понадобился весьма внушительный канал. Поэтому данные снимки обрабатываются и нарезаются на отдельные небольшие кусочки.
В данном топике я расскажу о одной из реализаций и о том как склеить Zoomify изображение, чтобы сразу было понятно о чём идёт речь, можете перейти по ссылке: 2 доллара.
Где-то около полугода назад я писал утилиту по преобразованию картинки в Zoomify изображение, хоть на тот момент была бесплатная фирменная утилита, да и Photoshop имеет такой функционал, но там требовалась пакетная обработка, отправка по ftp и ещё некоторые возможности. Спустя какое-то время мне понадобилось сделать обратный функционал, вот об этом и пойдёт речь в данном топике.
Зачем это нужно?
Ссылка выше указывала на страницу с изображением 2 долларов, я склеил данное изображение и размер получился больше 100 мегабайт (7500 х 6500 пикселей), конечно, я его не ужимал, но в любом случае размер будет внушительный. Думаю, что немногие смогли бы дождаться загрузки данного изображения, тем более, если им не нужна супер детализация или интересует лишь какой-то кусок. Со спутниковыми картами всё гораздо печальнее, например, размер Минска больше 4 Гб (точную цифру не помню, когда-то был сохранен кэш гугла на винчестере без максимального увеличения).
Рассказывать буду о том как склеить картинку, но как вы убедитесь, обратные действия полностью опираются на алгоритмы, которые будут описаны далее с примером реализации на C#.
Как это работает?
Чтобы не растягивать статью, то я сразу начну описывать реализацию в перемешку с теорией. Запускаем Fiddler и переходим на страницу с двумя долларами (я почистил кэш браузера, чтобы файлы снова скачались по сети и отобразились в Fiddler).
На картинке видно, что загружается страница, после чего грузится флэш приложение (ZoomifyViewer.swf) и ImageProperties.xml для картинки 2DollarBill. Все картинки хранятся в отдельных папках на сервере, поэтому ImageProperties.xml всегда называется одинаково. Флэш просмоторщик загружает файл ImageProperties.xml, после чего он начинает подгружать кусочки. Что же там такого содержится, что он сразу знает что грузить?
<IMAGE_PROPERTIES WIDTH="7500" HEIGHT="6500" NUMTILES="1052" NUMIMAGES="1" VERSION="1.8" TILESIZE="256" />
* This source code was highlighted with Source Code Highlighter.Как Вы можете наблюдать, то тут нет ни одной ссылки на картинки, хотя просмоторщик загрузил больше десяти картинок. Давайте по порядку разберем параметры:
WIDTH=«7500» — ширина исходного изображения
HEIGHT=«6500» — высота исходного изображения
NUMTILES=«1052» — количество получившихся кусочков
NUMIMAGES=«1» — число изображений
VERSION=«1.8» — версия
TILESIZE=«256» — размер кусочка
Как эти параметры могут приблизить нас к ссылкам спросите Вы. Вот тут начинается самое интересное:
TileGroup0 — это папка, как только в папке появилось 256 файлов, то создается новая папка (TileGroup1 и т.д.)
0-0-0.jpg — первый нуль — это уровень (минимальная картинка, которая помещается в 256*256), второй и третий — это массив (столбец и строка соответственно, как и в большинстве языков программирования нумерация начинается с нуля)
Алгоритм
Вычисляем сколько раз нужно уменьшить картинку, чтобы она вписалась вписалась в квадрат 256*256, для этого исходную картинку делим на 2. В итоге получаем 234 * 203 пикселей и уровень равный 6. Тут окно просмоторщика довольно большое, поэтому был взят сразу третий уровень, а первый пошёл в навигацию. Нам же нужно взять сразу максимальный уровень, разделить изображение на кусочки и начать их скачивать, после чего можно их склеить и радоваться результату.
Итог
Как мне кажется я довольно подробно всё описал, в дополнение прикладываю код, поэтому вопросов быть не должно. В любом случае буду рад ответить на интересующие вопросы, если таковые имеются. Под отладчиком я рассматривал довольно много сайтов и с большего принципы везде одинаковые с небольшими поправками, но думаю, что теперь Вы знаете куда копать.
Проект для Visual Studio 2010, язык реализации C#: скачать
Ссылки
Официальный сайт
Документ, в котором содержится теория и ссылка на Python реализацию генерации
