☰

Porciones ampliadas de la imagen

tag-icon • tag-icon windows image-editing
Porciones ampliadas de la imagen

Me temo que esta es una pregunta demasiado limitada, pero de todos modos ahí va.

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

Acercarse

lo que quiero esnouna lupa en pantalla, sino más bien una herramienta que me ayuda a crear este tipo de imágenes. Lo que hago ahora (en Paint.NET) es agregar dos capas con la misma imagen, escalar la capa de fondo y cortar un área circular de la capa de primer plano y luego fusionarlas.

Respuesta1

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="https://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 el ancho y alto del svg debe establecerse en el tamaño original * escala del fondo
  • la escala de transformación para el primer uso de #baseimage debe coincidir con la escala elegida
  • la segunda transformación debería tener la traducción configurada para colocar la segunda copia de la imagen base debajo del círculo, en el código anterior, debido a que el círculo estaba en el centro del documento y la escala era 1 para la imagen base, los valores son la mitad negativa del ancho y la mitad del alto.
  • demostración 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 colocarla al hacer clic. El editor svg podría usarse para generar un .png de la vista actual.

información relacionada