Скругление углов картинок с помощью ImageMagick - PullRequest
Новая
       6

Скругление углов картинок с помощью ImageMagick

8 голосов
/ 05 апреля 2009

в моем приложении на Rails я хочу иметь похожий раздел профиля, такой как Facebook, где загруженные изображения автоматически уменьшаются и округляются. Я использую утилиту convert, чтобы уменьшить изображения до миниатюр, но есть ли возможность округлить их углы? Благодаря.

Ответы [ 4 ]

9 голосов
/ 25 сентября 2013

Универсальный раствор

Это решение работает с прозрачными и непрозрачными изображениями. Чтобы добавить закругленные углы с радиусом 15 пикселей к original_picture.png, что является изображением 100x100: 

convert -size 100x100 xc:none -draw "roundrectangle 0,0,100,100,15,15" mask.png
convert original_picture.png -matte mask.png \
  -compose DstIn -composite picture_with_rounded_corners.png

Это решение было дано PM здесь: https://stackoverflow.com/a/1916256/499917

Элегантное решение, не работает с прозрачными картинками

Это решение работает без какой-либо промежуточной картины. Как мило! Но это нарушит прозрачность вашей оригинальной картинки. Так что используйте только тогда, когда вы уверены, что ваша картинка не прозрачна.

Предположим, вам нужны закругленные углы с радиусом 15 пикселей: 

convert original_picture.png \
  \( +clone  -alpha extract \
    -draw 'fill black polygon 0,0 0,15 15,0 fill white circle 15,15 15,0' \
    \( +clone -flip \) -compose Multiply -composite \
    \( +clone -flop \) -compose Multiply -composite \
  \) -alpha off -compose CopyOpacity -composite picture_with_rounded_corners.png

Для удобства вот что вы обычно делаете на Ruby или некоторых других языках: 

in_pic = "original_picture.png"
out_pic = "picture_with_rounded_corners.png"
radius = 15
cmd = "convert #{in_pic} \\( +clone  -alpha extract " +
        "-draw 'fill black polygon 0,0 0,#{radius} #{radius},0 fill white circle #{radius},#{radius} #{radius},0' " +
        "\\( +clone -flip \\) -compose Multiply -composite " +
        "\\( +clone -flop \\) -compose Multiply -composite " +
        "\\) -alpha off -compose CopyOpacity -composite #{out_pic}"
`#{cmd}`

Источник: http://www.imagemagick.org/Usage/thumbnails/#rounded

7 голосов
/ 05 апреля 2009

Facebook не изменяет изображения, чтобы иметь закругленные углы. Вместо этого они используют HTML и CSS для наложения этого изображения на каждое изображение пользователя: http://www.facebook.com/images/ui/UIRoundedImage.png

Если вы посмотрите UIRoundedImage.png, вы обнаружите, что каждый "квадрат" состоит из прозрачного центра и непрозрачных углов, которые должны соответствовать фону, на котором будет лежать изображение пользователя. Например, если пользовательское изображение находится на белом фоне, то белые непрозрачные закругленные углы будут накладываться на пользовательское изображение.

Техника CSS для использования только определенной части UIRoundedImage.png называется «CSS-спрайты». Подробнее об этом вы можете прочитать здесь: http://www.alistapart.com/articles/sprites/

4 голосов
/ 05 апреля 2009

Вот несколько примеров закругленных углов: http://www.imagemagick.org/Usage/thumbnails/#rounded_border. Вам нужно будет создать какую-то маску (вручную или с помощью инструментов рисования), а затем наложить ее на изображение.

0 голосов
/ 08 февраля 2011

Вот код, который я написал, чтобы закруглить углы с помощью ImageMagick с использованием Perl. Должен портироваться на Ruby довольно легко:

http://article.gmane.org/gmane.comp.video.graphicsmagick.apis/322

...