Zoom en porciones de imagen

1

Me temo que esto es una pregunta demasiado estrecha, pero sin embargo, aquí va.

¿Existe alguna herramienta (o complemento a cualquier herramienta) que me permita "acercar" efectivamente partes de la imagen, como esta:

Zoom In

Lo que quiero es no una lupa en pantalla, sino una herramienta para ayudarme a crear esas imágenes. Lo que hago ahora (en Paint.NET) es agregar dos capas con la misma imagen, escalar la capa de fondo y cortar el área circular desde la capa de primer plano y luego combinarlas.

windows image-editing Anton Gogolev
fuente
No es demasiado estrecho. Tal como es, en realidad diría que esto es "demasiado amplio", ya que no ha especificado ninguna información sobre el sistema operativo, el software que se está utilizando, etc. Sistemas operativos?
Ƭᴇcʜιᴇ007
@ techie007 ¿Esto está mejor ahora?
Anton Gogolev
Mucho mejor. :)
Ƭᴇcʜιᴇ007
Así es como se hacen esas cosas. Si usa GIMP o photoshop, puede automatizar / grabar scripts para manejar los pasos básicos.
horatio
Una solución que usara un editor de código abierto .svg como Inkscape ¿estar bien visto? Podrías reemplazar la imagen base y hacer que aparezca como fondo escalado y como región recortada para el área ampliada. Una vez que haya configurado la plantilla para esto, sería relativamente fácil crear instancias adicionales.
Jason Aller

Respuestas:

1

El siguiente svg podría mejorarse de muchas maneras, pero demuestra un punto de partida. 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="323px">
    <defs>
        <image id="baseimage" xlink:href="http://i.stack.imgur.com/G4qab.jpg" width="100%" height="100%"/>  
        <circle id="zoom" cx="50%" cy="50%" r="100px" stroke="grey" stroke-width="4px" fill="none"/>
        <clipPath id="zoomclip">
            <use xlink:href="#zoom"/>
        </clipPath>
    </defs>
    <g alignment-baseline="baseline">
        <g>
            <use xlink:href="#baseimage" transform="scale(1)"/>  
        </g>
         <g clip-path="url(#zoomclip)">
             <use xlink:href="#baseimage"  transform="translate(-300 -162) scale(2)" />  
             <use xlink:href="#zoom"/>
         </g>
    </g>
</svg>

Notas:

  • establecer svg ancho y alto debe establecerse en tamaño original * escala de fondo
  • la escala de transformación para el primer uso de #baseimage debe coincidir con la escala elegida
  • la segunda transformación debe tener el conjunto de conversión para colocar la segunda copia de la imagen base debajo del círculo, en el código anterior porque el círculo estaba en el centro del documento y la escala era 1 para la imagen base; los valores son la mitad negativa de la anchura y la mitad de la altura.
  • demo en jsfiddle: http://jsfiddle.net/pqzsa/

Las posibles mejoras incluyen JavaScript para mover el círculo y alinear automáticamente la imagen base ampliada debajo del centro del círculo y posicionarla al hacer clic. El editor svg podría usarse para generar un archivo .png de la vista actual.

Jason Aller
fuente