Redondeo de esquinas de imágenes con ImageMagick

Question

en mi aplicación Rails Quiero tener una sección de perfil similar, como Facebook, donde las imágenes cargadas son automáticamente miniaturas y redondeadas. Estoy usando la utilidad convert para reducir el tamaño de las imágenes en miniaturas, pero ¿hay alguna opción para redondear sus esquinas también? Gracias.

Answer 1

Aquí hay algunos ejemplos de esquinas redondeadas: http://www.imagemagick.org/Usage/thumbnails/#rounded_border. Tendrá que crear una máscara de algún tipo (ya sea a mano o usando las herramientas de dibujo) y luego superponerla en su imagen.

Answer 2

Facebook no modifica las imágenes para que tengan 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 en 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 de CSS para usar solo una parte específica de UIRoundedImage.png se denomina "sprites CSS". Puedes leer más sobre esto aquí: http://www.alistapart.com/articles/sprites/

Answer 3

Aquí está el código que escribí 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

Answer 4

solución universal

Esta solución funciona con imágenes transparentes y no transparentes. Para añadir esquinas redondeadas 15 píxeles de radio a original_picture.png que 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 PM aquí: https://stackoverflow.com/a/1916256/499917

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

Esta solución funciona sin ninguna imagen intermedia. ¡Que agradable! Pero interrumpirá la transparencia de la imagen original. Por lo tanto, úselo solo cuando esté seguro de que su imagen no es transparente.

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

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 

Por conveniencia, aquí 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