onmouse imagen eventos ejemplo change javascript imaging

eventos - ¿Zoom de imagen usando javascript?



onmouseover html imagen (3)

¿Alguien ha llegado a un buen código para acercarse a una imagen usando javascript?

Sé que podría cambiarle el tamaño, etc., pero estaba siendo flojo y buscando algo inteligente para acercarme a diferentes niveles, moverme cuando hago zoom, etc.

Esto realmente depende de la calidad que busca. Si necesita una imagen de alta calidad de alquiler con niveles de zoom detallados e interpolación adecuada, tendrá que escribir un servicio de fondo para servir porciones ampliadas de sus imágenes. Si no le importa la calidad o la velocidad, puede descargar toda la imagen y ajustarla para que se muestre dentro de un div en una posición absoluta, desplazada para el área que desea ver y medida según lo determine su nivel de zoom.

Yo diría que probablemente estés después de la primera opción. Ya hay algunas herramientas para esto , por lo general no he usado ninguna de las herramientas; Estoy seguro de que othes publicará enlaces a otros que puedes probar; He escrito mi propio servicio y cliente. No puedo entrar en los detalles exactos como su propietario, 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 denota qué imagen (mediante una identificación) y las coordenadas para ampliar y el tamaño de la imagen de destino. Tengo el servicio cargando la imagen y recortando y redimensionándola (es más complicado que eso ya que tengo muchas optimizaciones y preparación cuando el archivo se carga originalmente, como múltiples secciones transversales del archivo para una ejecución más rápida 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 marcar un área en la imagen que quiere ampliar. marcan el área y hacen clic en el zoom. Esto luego calcula los desplazamientos en la imagen de las coordenadas seleccionadas según el tamaño de la imagen original y el tamaño de imagen visible. Envío estas coords al manejador mencionado anteriormente. Cargo el URL con la cadena de consulta del servicio en un objeto de Imagen y manejo la carga. Si todo salió bien, lo cambio a la imagen visualizada y actualizo todas mis variables del lado del cliente para determinar en qué parte de la imagen estoy haciendo zoom y luego se puede hacer un acercamiento de nuevo o alejarlo o hacer un barrido desde allí.

Ahora entiendo su requisito de holgazanería, pero debo decir que escribir esto en realidad es bastante fácil de hacer para poner en marcha 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 de la marca de selección de zoom y abajo a la derecha. O no tener un cuadro de selección en absoluto y tener un zoom de entrada y salida solo a intervalos predeterminados. Yo en mis proyectos necesitaba un cuadro de zoom ya que es una solución de análisis de imagen bastante compleja.

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