Знакомство с технологией DeepZoomComposer

Примеры

Благодаря программе DeepZoomComposer мы можем создавать коллекции изображений с разным (в том числе с очень высоким) разрешением. После этого созданные коллекции можно экспортировать или публиковать в виде отдельных изображений с разным разрешением. При этомколлекции становятся доступными для просмотра, навигации или панорамирования без потери качества даже при низкоскоростном Интернете.

DeepZoomComposer позволяет масштабировать изображение без потери качества

DeepZoomComposer можно использовать для создания фотогалерей, картографических сервисов, визуальных каталогов и так далее.

В основе DeepZoomComposer лежат такие технологии как MicrosoftSilverlight и SeadragonAjax. Когда мы рассматриваем изображение, созданное в DeepZoomComposer, наш браузер загружает лишь небольшую часть от общего изображения с подходящим именно для этого случая разрешением.

При первой загрузке браузер отображает лишь общий план с низким разрешением, затем постепенно подгружает фрагменты изображения с все большим разрешением. За счет этого достигается плавность масштабирования и панорамирования изображения.

Каждое изображение в DeepZoomComposer нарезается на плитки. В процессе создания плиток DeepZoomComposer создает пирамиды изображений с различным разрешением. В пирамиде изображения есть изображение с высоким разрешением, состоящее из множества плиток, лежащих в основании пирамиды, на вершине пирамиды находится плитка с наименьшим разрешением. Каждая плитка на каждом уровне в пирамиде имеет разрешение 256 256 пикселов. Построение плиток производится в процессе экспорта изображения.

При просмотре изображения в браузере вначале загружаются плитки с наименьшим разрешением вместо того, чтобы ждать полной загрузки всего изображения. При панорамировании и масштабировании изображения по мере необходимости загружаются другие части изображения. Предположим, что мы хотим увеличить центральную часть изображения. При этом браузер будет отображать только нужную область вместо того, чтобы грузить его целиком.

Пример 1. Разработка приложения DeepZoomComposer (sample_1)

Для начала нам потребуется установить программу DeepZoomComposer. Скачать программу можно по ссылке: http://www.microsoft.com/en-us/download/details.aspx?id=24819.

Далее, необходимо выбрать изображение с высоким разрешением, например, старинную карту (map.jpg):

увеличить изображение

Запускаем DeepZoomComposer и создаем новый проект (map)

увеличить изображение

увеличить изображение

Добавляем изображение с помощью команды Addimage…

увеличить изображение

Экспортируем изображение, нажав на кнопку Export

увеличить изображение

Еще раз нажимаем на кнопку Export

Получаем уведомление об успешном завершении операции экспорта.

Для просмотра результата экспорта нажимаем на кнопку PreviewinBrowser.

Просматриваем результат.