Partes ampliadas da imagem

Question

Eu tenho medo que isso seja uma questão muito restrita, mas mesmo assim aqui vai.

Existe alguma ferramenta (ou plug-in para qualquer ferramenta) que me permita efetivamente "ampliar" partes da imagem, assim:

O que eu quero é não uma lupa na tela, mas sim uma ferramenta para me ajudar a criar essas imagens. O que eu faço agora (no Paint.NET) é adicionar duas camadas com a mesma imagem, dimensionar a camada de fundo e cortar a área circular da camada de primeiro plano e depois mesclá-las.

    

Answer 1

O seguinte svg pode ser melhorado de várias maneiras, mas demonstra um ponto 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:

• definir largura e altura do svg deve ser definido para o tamanho original * escala de fundo
• a escala de transformação para o primeiro uso de #baseimage deve corresponder à escala escolhida
• a segunda transformação deve ter set traduzido para posicionar a segunda cópia da imagem base sob o círculo, no código acima porque o círculo estava no centro do documento e a escala era 1 para a imagem base os valores são metade negativa da largura e metade altura.
• demo no jsfiddle: link

Possíveis melhorias incluem o JavaScript para mover o círculo e alinhar automaticamente a imagem de base ampliada sob o centro do círculo e posicioná-la ao clicar. O editor svg pode ser usado para gerar um .png da visão atual.