Увеличенные части изображения

1

Боюсь, что это слишком узкий вопрос, но тем не менее здесь идет.

Существует ли какой-либо инструмент (или плагин к какому-либо инструменту), который позволил бы мне эффективно «увеличивать» части изображения, например так:

Приблизить

Я хочу не экранную лупу, а инструмент, помогающий мне создавать такие изображения. Что я делаю сейчас (в Paint.NET), так это добавляю два слоя с одним и тем же изображением, масштабирую фоновый слой и вырезаю круглую область из слоя переднего плана, а затем объединяю их вместе.

windows image-editing Антон Гоголев
источник
Он не слишком узкий - я бы сказал, что на самом деле это «слишком широко», поскольку вы не указали никакой информации об ОС, используемом программном обеспечении и т. Д. Почему бы не использовать стандартный инструмент для увеличения, подобный тем, которые встроены во многие OSs?
Ƭᴇcʜιᴇ007
@ techie007 Это лучше?
Антон Гоголев
Намного лучше. :)
Ƭᴇcʜιᴇ007
Это способ, которым такие вещи сделаны. Если вы используете GIMP или фотошоп, вы можете использовать автоматизацию сценариев / записей для выполнения основных шагов.
Горацио
Будет ли приемлемым решение с использованием редактора .svg с открытым исходным кодом, такого как Inkscape ? Вы сможете заменить базовое изображение, и оно будет отображаться как масштабированный фон и как обрезанная область для увеличенной области. После того, как вы настроили шаблон для этого, было бы относительно легко создавать дополнительные экземпляры.
Джейсон Аллер

Ответы:

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="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>

Заметки:

  • установить ширину и высоту SVG должны быть установлены на оригинальный размер * масштаб фона
  • масштаб преобразования для первого использования #baseimage должен соответствовать выбранной шкале
  • второе преобразование должно иметь значение translate, установленное для размещения второй копии базового изображения под кружком, в приведенном выше коде, поскольку кружок находился в центре документа, а масштаб был равен 1, для базового изображения значения - отрицательная половина ширины и половина высоты.
  • демо на jsfiddle: http://jsfiddle.net/pqzsa/

Возможные улучшения включают JavaScript для перемещения круга и автоматического выравнивания увеличенного базового изображения под центром круга и размещения его по щелчку. Редактор svg может быть использован для вывода .png текущего представления.

Джейсон Аллер
источник