☰

画像の一部を拡大したもの

tag-icon • tag-icon windows image-editing
画像の一部を拡大したもの

質問の範囲が狭すぎるのではないかと心配ですが、それでもお答えします。

次のように、画像の一部を効果的に「ズームイン」できるツール (または任意のツールのプラグイン) はありますか?

ズームイン

私が欲しいのはない画面上の拡大鏡ではなく、むしろそのような画像を作成するのに役立つツールです。私が現在 (Paint.NET で) 行っていることは、同じ画像の 2 つのレイヤーを追加し、背景レイヤーを拡大縮小し、前景レイヤーから円形の領域を切り取って、それらを結合することです。

答え1

次の svg はさまざまな方法で改善できますが、出発点を示しています。

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

ノート：

  • SVGの幅と高さを元のサイズ*背景のスケールに設定する必要があります
  • #baseimage を最初に使用する場合の変換スケールは、選択したスケールと一致する必要があります。
  • 2 番目の変換では、ベース イメージの 2 番目のコピーを円の下に配置するように translate を設定する必要があります。上記のコードでは、円がドキュメントの中央にあり、ベース イメージのスケールが 1 であるため、値は幅の負の半分と高さの半分になります。
  • jsfiddle のデモ:http://jsfiddle.net/pqzsa/

改善点としては、円を移動し、拡大されたベースイメージを円の中心に自動的に配置してクリック時に配置するための JavaScript などがあります。SVG エディターを使用して、現在のビューの .png を出力することもできます。

関連情報