Redondeando las esquinas de las imágenes con ImageMagick

Facebook no modifica las imágenes para tener esquinas redondeadas. En su lugar, usan HTML y CSS para aplicar esta imagen sobre cada imagen de usuario: http://www.facebook.com/images/ui/UIRoundedImage.png

Si inspecciona UIRoundedImage.png, encontrará que cada "cuadrado" consiste en un centro transparente y esquinas opacas que deben coincidir con el fondo sobre el que descansará la imagen del usuario. Por ejemplo, si la imagen del usuario está sobre un fondo blanco, las esquinas redondeadas opacas blancas se superpondrán en la imagen del usuario.

La técnica CSS para usar solo una parte específica de UIRoundedImage.pngse llama "sprites CSS". Puede leer más sobre esto aquí: http://www.alistapart.com/articles/sprites/

Aquí está el código que he escrito para redondear las esquinas con ImageMagick usando Perl. Debería puerto a Ruby con bastante facilidad:

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

solución universal

Esta solución funciona con imágenes transparentes y no transparentes. Para añadir 15 píxeles radio de las esquinas redondeadas a original_picture.pngque es una imagen de 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

Esta solución fue dada por la tarde aquí: https://stackoverflow.com/a/1916256/499917

solución elegante, no funciona con imágenes transparentes

Esta solución funciona sin ningún tipo de imagen intermedia. ¡Que agradable! Pero vaya a interferir con la transparencia de su imagen original. Así que utilice sólo cuando esté seguro de que su imagen no es transparente.

Suponga que desea esquinas redondeadas con un radio de 15 píxeles:

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

Para mayor comodidad, esto es lo que normalmente va a hacer en Rubí o algunos otros idiomas:

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

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