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

Answer 2

Facebook doesn't modify pictures to have rounded corners. Instead, they use HTML and CSS to apply this image over each user picture: http://www.facebook.com/images/ui/UIRoundedImage.png

If you inspect UIRoundedImage.png, you'll find that each "square" consists of a transparent center, and opaque corners that are meant to match the background on which the user picture will rest. For instance, if the user picture is on a white background, then white opaque rounded corners will be overlaid on the user picture.

The CSS technique for using just a specific part of UIRoundedImage.png is called "CSS sprites". You can read more about it here: http://www.alistapart.com/articles/sprites/

Answer 3

Here are some rounded corners examples: http://www.imagemagick.org/Usage/thumbnails/#rounded_border. You'll need to create a mask of some sort (either by hand or using the drawing tools) and then overlay it onto your image.