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

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

8
facebook image-manipulation imagemagick ruby-on-rails

4 ответов

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

4

универсальное решение

это решение работает с прозрачными и непрозрачными изображениями. Чтобы добавить 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

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

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

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

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

9

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

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

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

7

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

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

0