Вопрос

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

Это было полезно?

Решение

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

Другие советы

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

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

Это решение было дано ВЕЧЕРА здесь: 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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top