Imagem Zoom usando javascript?

Question

Alguém tem que algum código bom para aumentar o zoom em uma imagem usando javascript?

Eu sei que eu poderia apenas redimensioná-la etc, mas estava sendo preguiçoso e procurando algo inteligente para ampliar a diferentes níveis, se movimentar quando ampliada etc

Answer 1

Isso realmente depende do que qualidade você está depois. Se você precisa de uma imagem contratações hiquality com níveis de zoom detalhados e interpolação adequada você precisará escrever um serviço de back-end para servir porções ampliadas de suas imagens. Se você não tem cuidado com a qualidade ou a velocidade, você pode baixar a imagem inteira e ajustá-lo para exibir dentro de uma div absolutamente posicionado, deslocamento para a área que deseja visualizar e dimensionados conforme determinado pelo seu nível de zoom.

Eu diria que você está provavelmente após a primeira opção. Existem algumas ferramentas já feitas para este , eu persoanlly havnt usado qualquer uma das ferramentas ; Estou certo othes vai postar links para outros que você pode tentar; Eu escrevi o meu próprio serviço e cliente. Eu não posso entrar em detalhes exatos como seu proprietário, mas eu posso te dar uma visão geral do que eu faço.

Eu tenho um manipulador de asp.net genérica que leva um denotando string de consulta que imagem (por uma id) e as coordenadas para fazer zoom e se o tamanho de imagem alvo. Tenho a carga de serviço a imagem e recortar e redimensionar-lo (a sua mais complicado do que isso, como eu tenho muitas otimizações e preparsing quando o arquivo é inicialmente carregadas, como várias secções do arquivo para uma mais rápida servindo quando o zoom, mas o que eu descrever aqui é o básico).

Esse serviço simplesmente retorna tipo de imagem / jpeg e envia a imagem.

No lado do cliente Eu escrevi um controle de caixa de demarcação que permite ao usuário marquise uma área na imagem que eles querem para fazer zoom. eles marquise da área e clique zoom. Isso, então, calcula os deslocamentos para a imagem das coordenadas selecionados com base no tamanho da imagem original e o tamanho da imagem visível. I enviar coords stas para o manipulador anteriormente mentioned.I carregar a url com string de consulta do srvice em um objeto de imagem, e lidar com onload. Se tudo corresse bem, eu depois de swap que para a imagem visualizada e atualizações de todos os meus variáveis ??do lado do cliente para determinar onde na imagem Estou ampliada para dentro e, em seguida, ele pode ser ampliado novamente ou ampliadas para fora ou garimpados mais de lá.

Agora eu entendo a sua exigência preguiçoso, mas eu preciso dizer que escrever este é realmente muito fácil de fazer para obter o básico indo. a parte mais difícil você vai encontrar é fazer uma caixa de seleção. Mas então, mesmo que pode ser tão simples como rastreamento de dois cliques. Superior esquerdo do marque selecione zoom e inferior direito. Ou não ter uma caixa de seleção em tudo e tem um zoom in e out apenas em intervalos pré-determinados. I em meus projetos exigida uma caixa de zoom como uma solução de análise de imagem bastante complexo.

Espero que este, pelo menos útil e leva você para algo útil.

Answer 2

Verifique o seguinte:

• jQZoom
• Zoomimage - plugin jQuery
• jQuery ImgZoom
• FancyBox

Answer 3

Como grande são as imagens? Se eles são enormes as imagens que você fazê-las como o google estilo de mapa usando este http: // www.casa.ucl.ac.uk/software/googlemapimagecutter.asp