Что такое Seadragon?

  • Article

Seadragon Icon Изменить масштаб – увидеть детали или наоборот охватить всю картину сразу – задача из разряда повседневных. Применительно к изображениям, с этой задачей замечательно справляется детище Live Labs – технология Seadragon, уже реализованная, в виде DeepZoom для Silverlight (см. также пост Silverlight Viewer для Photosynth), Seadradon Ajax на JavaScript, Seadragon Mobile для iPhone (см. также пост Seadragon выходит на мобильники!) и, конечно, Photosynth.

Условно, реализацию Seadragon можно разделить на две части – предварительную обработку и собственно отображение.

Предварительная обработка – подготовка изображений, включающая разбиение на тайлы заданного размера и построение пирамиды изображений

Cc645050.Image_pyramid(en-us,VS.95).png 

На выходе получается пара xml-файлов и набор папок со сгенерированными изображениями, примерно такой

image image

Получить таккую коллекцию можно с помощью DeepZoomComposer или PhotoZoom. Аналогичная коллекция генерится при создании синтов для Photosynth, впрочем, об этом как-нибудь в другой раз.

Если для композиции используется несколько изображений, то существуют два варианта их обработки

  • как единой композиции – в этом случае исходные изображения объединяются в одно большое изображение,
  • как коллекции изображений – в этом случае каждое исходное изображение обрабатывается отдельно, а дальше они комбинируются и над ними можно проводить разные операции (фильтрафия, перемещение и т.д.). Хороший пример – известный проект Hard Rock Memorabilia, в рамках которого изорабжения можно фильтровать по артисту, периоду, месту и т.д.

Во втором случае структура папок выглядит немного сложнее: для каждого изображения тайлы генерятся отдельно + тайлы для превью каждого изображения + расширенные xml-файлы с описанием метаданных и описанием содержимого коллекции.

О том, как такие тайлы можно делать самостоятельно, я расскажу тоже “как-нибудь в другой раз”.

 

Отображение всего этого хозяйства – не менее важная часть.

Даже самая важная – это то, что видит пользователь!

Для качественного экспиренса (смайл!) нужно обеспечить нескольких вещей:

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

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

Так как тайлы можно отображать сразу по мере подгрузки (даже если конкретный тайл загрузился не полностью, его уже можно начать показывать размытым), то в итоге получаются плавные переходы:

Cc645050.Different_res_over_time(en-us,VS.95).png

Какой-то принципиальной сложности в решении первой задачи нет: аналогичные проблемы решаются в картографических online-сервисах. В случае Seadragon существует несколько реализаций – для самых разных платформ: от Silverlight (DeepZoom) и DirectX (плагин для Photosynth), до JavaScript (Seadragon Ajax) и iPhone (Seadragon Mobile)… есть даже реализация на Flash (sic!).

А вот с решением второй и третьей задач возникают сложности :) Во всяком случае, с JavaScript и браузерным рендерингом изображений это не так просто (если вообще возможно), как хотелось бы.

Собственно, о реализации Seadragon для JavaScript и будет следующий пост. Следите за обновлениями ;)