Rounding corners of pictures with ImageMagick

Question

in my Rails app I want to have a similar profile section like Facebook where uploaded images are automatically thumbnailed and corner-rounded. I'm using the convert utility to downsize images into thumbnails, but is there an option to round their corners too? Thanks.

Answer 1

Universal solution

This solution works with transparent and non-transparent pictures. To add 15 pixels radius rounded corners to original_picture.png which is a 100x100 picture:

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

This solution was given by PM here: https://stackoverflow.com/a/1916256/499917

Elegant solution, does not work with transparent pictures

This solution works without any intermediate picture. How nice! But it will disrupt your original picture's transparency. So use only when you are sure that your picture is not transparent.

Suppose you want rounded corners with 15px radius:

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

For convenience, here is what you will typically do in Ruby or some other languages:

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}`

Source: http://www.imagemagick.org/Usage/thumbnails/#rounded