Στρογγυλοποίηση γωνίες των εικόνων με ImageMagick

Facebook δεν τροποποιεί τις εικόνες να έχουν στρογγυλεμένες γωνίες. Αντ 'αυτού, χρησιμοποιούν HTML και CSS για να εφαρμόσετε αυτήν την εικόνα πάνω σε κάθε εικόνα του χρήστη: http://www.facebook.com/images/ui/UIRoundedImage.png

Αν επιθεωρήσει UIRoundedImage.png, θα διαπιστώσετε ότι κάθε «πλατεία» αποτελείται από ένα διαφανές κέντρο, και αδιαφανή γωνιές που είναι γραφτό να ταιριάζει με το υπόβαθρο πάνω στο οποίο θα στηριχθεί η εικόνα του χρήστη. Για παράδειγμα, αν η εικόνα χρήστης είναι σε λευκό φόντο, στη συνέχεια, λευκό αδιαφανές στρογγυλεμένες γωνίες θα τοποθετηθεί πάνω στην εικόνα του χρήστη.

Η τεχνική CSS για τη χρήση μόνο ένα συγκεκριμένο τμήμα του UIRoundedImage.pngονομάζεται «sprites CSS». Μπορείτε να διαβάσετε περισσότερα για αυτό εδώ: http://www.alistapart.com/articles/sprites/

Εδώ είναι ο κώδικας που έγραψα για να στρογγυλοποιεί τις γωνίες με το ImageMagick χρησιμοποιώντας Perl. Θα πρέπει θύρα για Ruby αρκετά εύκολα:

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

καθολική λύση

Η λύση αυτή λειτουργεί με διαφανή και αδιαφανή εικόνες. Για να προσθέσετε 15 pixels ακτίνα στρογγυλεμένες γωνίες για original_picture.pngτο οποίο είναι 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

Η λύση δόθηκε από PM εδώ: https://stackoverflow.com/a/1916256/499917

Κομψή λύση, δεν λειτουργεί με διαφανείς εικόνες

Η λύση αυτή λειτουργεί χωρίς καμία ενδιάμεση εικόνα. Τι ωραία! Αλλά θα διακόψει τη διαφάνεια αρχική εικόνα σας. Έτσι, χρησιμοποιούν μόνο όταν είστε σίγουροι ότι η εικόνα σας δεν είναι διαφανής.

Ας υποθέσουμε ότι θέλετε στρογγυλεμένες γωνίες με ακτίνα 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

Για λόγους ευκολίας, εδώ είναι ό, τι θα κάνετε συνήθως σε Ruby ή κάποιες άλλες γλώσσες:

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

Πηγή: http://www.imagemagick.org/Usage/thumbnails/#rounded