Zoomed-in portions of image

I'm afraid this is too narrow of a question, but nevertheless here goes.

Is there any tool (or plugin to whatever tool) which would allow me to effectively "zoom in" parts of image, like this:

Zoom In

What I want is not an on-screen magnifier, but rather a tool to help me with creating such images. What I do now (in Paint.NET) is I add two layers with the same image, scale background layer and cut circular area from the foreground layer and then merge them together.

Anton Gogolev

Posted 2014-03-05T15:17:11.540

Reputation: 193

It's not too narrow -- As-is I'd actually say this is "too broad", as you haven't specified any information about OS, software being used, etc. Why not use a standard magnifier tool like those built into many OSs? – Ƭᴇcʜιᴇ007 – 2014-03-05T15:21:09.583

@techie007 Is this any better now? – Anton Gogolev – 2014-03-05T16:46:27.103

Much better. :) – Ƭᴇcʜιᴇ007 – 2014-03-05T16:54:27.680

This is the way such things are done. If you use GIMP or photoshop, you can script/record automation to handle the basic steps. – horatio – 2014-03-05T17:14:07.850

Would a solution that used an open source .svg editor like Inkscape be acceptable? You'd be able to replace the base image and have it appear both as a scaled background and as a clipped region for the magnified area. Once you had the template set up for this it would be relatively easy to create additional instances.

– Jason Aller – 2014-03-05T17:17:00.607

Answers

The following svg could be improved in many ways, but demonstrates a starting point.

<?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>

Notes:

set svg width and height should be set to original size * scale of background
the transform scale for the first use of #baseimage should match the scale picked
the second transform should have translate set to position the second copy of the baseimage under the circle, in the code above because circle was at center of document and scale was 1 for base image the values are negative half of width and half of height.
demo at jsfiddle: http://jsfiddle.net/pqzsa/

Possible improvements include JavaScript to move the circle around and automatically align the zoomed baseimage under the center of the circle and position it on click. The the svg editor could be used to output a .png of the current view.

Jason Aller

Posted 2014-03-05T15:17:11.540

Reputation: 2 254