Arrotondare gli angoli delle immagini con ImageMagick

Question

nella mia app Rails Voglio avere una sezione di profilo simile come Facebook dove le immagini caricate sono automaticamente ridimensionate e arrotondate. Utilizzo l'utilità convert per ridimensionare le immagini in miniature, ma esiste anche un'opzione per arrotondare gli angoli? Grazie.

Answer 1

Ecco alcuni esempi di angoli arrotondati: http://www.imagemagick.org/Usage/thumbnails/#rounded_border. Dovrai creare una maschera di qualche tipo (a mano o usando gli strumenti di disegno) e quindi sovrapporla all'immagine.

Answer 2

Facebook non modifica le immagini con gli angoli arrotondati. Al contrario, usano HTML e CSS per applicare questa immagine sopra ogni immagine utente: http://www.facebook.com/images/ui/UIRoundedImage.png

Se si ispeziona UIRoundedImage.png, si scoprirà che ogni "quadrato" è costituito da un centro trasparente e angoli opachi che sono pensati per abbinare il sfondo su cui poggia l'immagine dell'utente. Ad esempio, se l'immagine dell'utente è su uno sfondo bianco, gli angoli arrotondati opachi bianchi saranno sovrapposti sull'immagine dell'utente.

La tecnica CSS per l'utilizzo di una parte specifica di UIRoundedImage.png è denominata "sprite CSS". Puoi leggere maggiori informazioni qui: http://www.alistapart.com/articles/sprites/

Answer 3

Ecco il codice che ho scritto per arrotondare gli angoli con ImageMagick usando Perl. Dovrebbe porta a Ruby abbastanza facilmente:

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

Answer 4

soluzione universale

Questa soluzione funziona con le immagini trasparenti e non trasparenti. Per aggiungere 15 pixel raggio angoli arrotondati per original_picture.png che è un quadro 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 

Questa soluzione è stata data da PM qui: https://stackoverflow.com/a/1916256/499917

soluzione elegante, non funziona con le immagini trasparenti

Questa soluzione funziona senza alcuna immagine intermedia. Che carino! Ma disturberà la trasparenza della tua immagine originale. Quindi, usalo solo quando sei sicuro che la tua immagine non sia trasparente.

si supponga di voler angoli arrotondati con 15px raggio:

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 

Per comodità, qui è quello che in genere si fare in Ruby o di alcune altre lingue:

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

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