Zoom de imagen usando javascript?

Question

¿Alguien ha llegado a un buen código para ampliar una imagen usando JavaScript?

Sé que podría cambiar el tamaño, etc., pero estaba siendo flojo y buscaba algo inteligente para hacer zoom a diferentes niveles, moverme cuando hacía zoom, etc.

Answer 1

Esto realmente depende de la calidad que buscas. Si necesita una imagen de alta calidad de contrataciones con niveles de zoom detallados y una interpolación adecuada, deberá escribir un servicio de back-end para servir porciones ampliadas de sus imágenes. Si no le importa la calidad o la velocidad, puede descargar la imagen completa y ajustarla para mostrarla dentro de un div en una posición absolutamente absoluta, desplazada por el área que desea ver y dimensionada según lo determinado por su nivel de zoom.

Diría que probablemente buscas la primera opción. Ya hay algunas herramientas hechas para esto , yo personalmente no he usado ninguna de las herramientas ; Estoy seguro de que otros publicarán enlaces a otros que puedes probar; He escrito mi propio servicio y cliente. No puedo entrar en los detalles exactos como su propiedad, pero puedo darle una visión general de lo que hago.

Tengo un controlador genérico asp.net que toma una cadena de consulta que indica qué imagen (por una identificación) y las coordenadas para ampliar y el tamaño de la imagen de destino. Tengo el servicio de cargar la imagen y recortar y cambiar el tamaño (es más complicado que eso, ya que tengo muchas optimizaciones y preparsing cuando el archivo se cargó originalmente, como múltiples secciones transversales del archivo para un servicio más rápido al hacer zoom, pero lo que describo aquí está lo básico).

Ese servicio simplemente devuelve type image / jpeg y envía la imagen.

En el lado del cliente, he escrito un control de cuadro de marquesina que permite al usuario marquesar un área de la imagen que desea ampliar. marcan el área y hacen clic en el zoom. Esto calcula los desplazamientos en la imagen de las coordenadas seleccionadas en función del tamaño de la imagen original y el tamaño de la imagen visible. Envío estos códigos al controlador mencionado anteriormente. Cargo la url con la cadena de consulta del servicio en un objeto Image y manejo la carga. Si todo salió bien, entonces lo cambio a la imagen visualizada y actualizo todas las variables del lado del cliente para determinar en qué parte de la imagen me acerco y luego se puede hacer zoom nuevamente o alejarse o desplazarse más desde allí.

Ahora entiendo su requerimiento perezoso, pero necesito decir que escribir esto en realidad es bastante fácil de hacer para que funcione lo básico. la parte más difícil que encontrarás es hacer un cuadro de selección. Pero incluso eso puede ser tan simple como rastrear dos clics. Arriba a la izquierda del zoom, seleccione marca y abajo a la derecha. O no tener un cuadro de selección y tener un acercamiento y alejamiento solo a intervalos predeterminados. Yo en mis proyectos requería un cuadro de zoom, ya que es una solución de análisis de imagen bastante compleja.

Espero que esto sea al menos útil y te lleve a algo útil.

Answer 2

Comprueba esto:

• jQZoom
• Zoomimage - complemento jQuery
• jQuery ImgZoom
• FancyBox

Answer 3

¿Qué tan grandes son las imágenes? Si son imágenes enormes, hágalas como el estilo del mapa de Google usando este http: // www.casa.ucl.ac.uk/software/googlemapimagecutter.asp