Seadragon: Imagens panorâmicas de 120MP ou mais com preciso recurso de “zoom”!

Tokyo - Imagem Panorâmica

Seadragon Visualize imagens panorâmicas de 120MP ou mais e com efeitos de “zoom” que exibem os mínimos detalhes. O Seadragon pode ser adicionado em blogs/sites, crie suas próprias imagens contendo informações em pequena escala e disponibilize-as aos seus visitantes. Veja exemplos abaixo:

Trabalho artístico com dimensões de 11000 x 11000 pixels / 121MP:

Imagem panorâmica com dimensões de 23575 x 2969 pixels / 70MP:


Este recurso carrega uma imagem apenas nos pontos em que é ampliada: a imagem pode ser visualizada em alta qualidade sem pesar na conexão. No processo, a  imagem passa por um tratamento no qual os “pixels são misturados”,  gerando uma figura muito mais nítida e, contudo, mais leve, isto é, o Seadragon  exige menos da conexão sem  comprometer a qualidade da imagem.

Na versão em Silverlight,  o Seadragon conta com um desempenho ainda melhor e com maior estabilidade. A elegância das transições ocorrem principalmente quando a imagem recebe um brusco “zoom”. O Seadragon é um software interativo que roda nos navegadores mais populares, podendo ser utilizado em seu blog/site, sem custos. Tomara que ele continue gratuito!

Os tutoriais abaixo ensinam como criar a sua própria imagem e como compartilhá-la com seus amigos e em redes sociais, como o Twitter e o Facebook:

[Tutorial] Adicionando uma imagem no Seadragon

O primeiro passo é disponibilizar a imagem na internet, já que o Seadragon não hospeda imagens. Será necessário hospedá-la em outro lugar. Recomendo dois sites: o ImageHost e o TinyPic. Abaixo será exemplificada o uso do Seadragon com o serviço TinyPic:

  1. Acesse o site TinyPic [link]
  2. Em frente ao campo “Arquivo”, clique no botão “Enviar arquivo”; aparecerá um gerenciador de arquivos, busque a imagem desejada e clique duas vezes sobre ela; sem alterar nenhum outro campo, clique em “Enviar Agora!”
  3. Na sequência, aparecerá vários campos para diferentes aplicações. Para o Seadragon, utiliza-se o  ”Link direto para Layouts”; copie todo o conteúdo deste campo e acesse o site do Seadragon [link]
  4. No único campo existente na página, o “Create your own”, cole o link da imagem que foi disponibilizado no TinyPic; depois clique em “Create”, que fica logo à frente do campo.
  5. Pronto! O recurso do Seadragon foi adicionado à imagem. Para divulgar sua imagem, apenas copie e mande o link do campo “URL” .

A seguir, veja outras maneiras de utilizar o Seadragon:

[Tutorial] Adicionando a imagem com o recurso do Seadragon em seu site

  1. Siga todos os procedimentos citado acima até o “4″, em que, ao clicar em “Create” no site Seadragon, aparecerá o campo”Embed”, que é o campo para aplicação do recurso em páginas da web de outros sites.
  2. Copie todo o conteúdo do campo “Embed” e cole no campo “HTML” em seu blog/site
  3. Para definir o tamanho da janela que será exibida no site, basta alterar o link do campo “Embed”, em que “width” significa largura e “height” significa altura. Por exemplo, se eu quisesse que a janela tivesse 200pixels de altura e 350pixels de largura, bastava eu alterar o código desta maneira: “[...] width=350&height=200px [...]“. Se você quiser que a janela se ajuste ao tamanho disponível, ao invés de deixar os números, deixe escrito “auto”.

[Tutorial] Publicando imagens com o recurso Seadragon em redes sociais

  1. Faça todo o procedimento até que lhe apareça os campos “URL”, “Embed” e o “Share”.
  2. Em frente ao campo “Share” estão os links para disponibilizar sua imagem em redes sociais e outros serviços online, é só clicar neles e pronto!

Espero que tenham gostado. Abraços.

Related Posts with Thumbnails

Sobre o Autor

Luiz Felipe - Estudante do 3º ano do ensino médio no colégio Engº Juarez Wanderley em São José dos Campos - SP. É o administrador dos sites TheNets e tenta dar uma de programador e design desenvolvendo projetos em PHP, HTML5 e CSS3 - agora está se aventurando no mundo do framework jQuery.