A completare gli angoli della foto con ImageMagick

Question

nel mio Rails app voglio avere una sezione profilo simile come Facebook, dove le immagini caricate sono thumbnailed e angolo-arrotondato automaticamente. Sto utilizzando l'utilità convert di ridimensionare le immagini in miniatura, ma c'è la possibilità di arrotondare gli angoli troppo? Grazie.

Answer 1

Ecco alcuni esempi angoli arrotondati: http://www.imagemagick.org/Usage / miniature / # rounded_border . Avrai bisogno di creare una maschera di qualche tipo (a mano o utilizzando gli strumenti di disegno) e poi sovrapporre sul vostro immagine.

Answer 2

Soluzione universale

Questa soluzione funziona con le immagini trasparenti e non trasparenti. Per aggiungere 15 pixel di 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 sarà interrompere la trasparenza del quadro originale. Modo da utilizzare solo quando si è sicuri che l'immagine non è trasparente.

Si supponga di voler angoli arrotondati con raggio 15px:

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

Answer 3

Facebook non modificare le immagini per avere angoli arrotondati. Invece, usano HTML e CSS per applicare questa immagine su ogni immagine utente: http: // www.facebook.com/images/ui/UIRoundedImage.png

Se si controlla UIRoundedImage.png, vi accorgerete che ogni "piazza" consiste di un centro trasparente, e gli angoli opachi che sono destinate a corrispondere allo sfondo su cui l'immagine utente riposerà. Per esempio, se l'immagine utente si trova su uno sfondo bianco, poi bianco angoli arrotondati opache saranno sovrapposti sopra l'immagine dell'utente.

La tecnica CSS per l'utilizzo di solo una parte specifica del UIRoundedImage.png si chiama "sprite CSS". Si può leggere di più su di esso qui: http://www.alistapart.com/articles/sprites/

Answer 4

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

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