Afronding hoeken van foto's met ImageMagick

Facebook biedt geen foto's wijzigen om afgeronde hoeken te hebben. In plaats daarvan gebruiken ze HTML en CSS om dit beeld te brengen over elke gebruiker foto: http://www.facebook.com/images/ui/UIRoundedImage.png

Als je te inspecteren UIRoundedImage.png, zult u merken dat elke "vierkant" bestaat uit een transparante center, en ondoorzichtige hoeken die zijn bedoeld om de achtergrond waarop de gebruiker foto zal rusten passen. Bijvoorbeeld, als de gebruiker beeld is op een witte achtergrond, dan witte ondoorzichtige afgeronde hoeken zal worden gelegd op de foto gebruiker.

De CSS techniek voor het gebruik van slechts een specifiek deel van UIRoundedImage.pngheet "CSS sprites". U kunt hier meer over lezen: http://www.alistapart.com/articles/sprites/

Hier is de code die ik schreef hoeken ronden met ImageMagick met behulp van Perl. Het moet poort om Ruby vrij gemakkelijk:

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

universele oplossing

Deze oplossing werkt met transparante en niet-transparante foto's. Toevoegen 15 pixels straal afgeronde hoeken original_picture.pngdie een 100x100 beeld:

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

Deze oplossing werd gegeven door PM hier: https://stackoverflow.com/a/1916256/499917

Elegante oplossing, werkt niet met transparante foto's

Deze oplossing werkt zonder tussenbeeld. Wat leuk! Maar het zal de transparantie van uw originele foto's te verstoren. Dus alleen gebruiken als u zeker weet dat uw afbeelding is niet transparant.

Stel, u wilt afgeronde hoeken met 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

Voor het gemak, hier is wat je normaal gesproken zal doen in Ruby of een andere talen:

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

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