Avrunding hjørner av bilder med ImageMagick

Facebook endrer ikke bilder for å ha avrundede hjørner. I stedet bruker de HTML og CSS for å bruke dette bildet i løpet av hver bruker bilde: http://www.facebook.com/images/ui/UIRoundedImage.png

Hvis du inspisere UIRoundedImage.png, vil du finne at hver "torget" består av en gjennomsiktig sentrum, og ugjennomsiktig hjørner som er ment å matche bakgrunnen som brukeren Bildet vil hvile. For eksempel, hvis brukeren bildet er på en hvit bakgrunn, så hvite ugjennomsiktige avrundede hjørner vil legges over på brukerens bildet.

CSS teknikk for å bruke bare en bestemt del av UIRoundedImage.pngdet som kalles "CSS sprites". Du kan lese mer om det her: http://www.alistapart.com/articles/sprites/

Her er koden jeg skrev å runde hjørner med ImageMagick bruke Perl. Det bør port til Ruby ganske enkelt:

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

universell løsning

Denne løsningen fungerer med transparente og ikke-transparente bilder. For å legge til 15 piksler radius avrundede hjørner til original_picture.pngsom er et 100x100 bilde:

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

Denne løsningen ble gitt av PM her: https://stackoverflow.com/a/1916256/499917

Elegant løsning, fungerer ikke med gjennomsiktige bilder

Denne løsningen fungerer uten noen mellomliggende bilde. Så fint! Men det vil forstyrre din opprinnelige bildet gjennomsiktighet. Så bruk bare når du er sikker på at bildet ikke er gjennomsiktig.

Tenk deg at du vil ha avrundede hjørner med 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 enkelhets skyld, her er hva du vanligvis gjør i Ruby eller noen andre språk:

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

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