Zaokrąglanie narożników zdjęć z ImageMagick

Facebook nie modyfikować zdjęcia z zaokrąglonymi narożnikami. Zamiast tego używają HTML i CSS, aby zastosować ten obraz na każdym zdjęciu użytkownika: http://www.facebook.com/images/ui/UIRoundedImage.png

Jeśli sprawdzić UIRoundedImage.png, przekonasz się, że każdy „kwadrat” składa się z przezroczystego środka i nieprzezroczyste rogi, które miały pasować do tła, na którym obraz użytkownik będzie odpoczynek. Na przykład, jeśli użytkownik jest obraz na białym tle, następnie białe nieprzezroczyste zaokrąglone rogi zostanie nałożona na zdjęcie użytkownika.

Technika CSS za pomocą tylko konkretną część UIRoundedImage.pngnazywa się „duszki CSS”. Możesz przeczytać więcej na ten temat tutaj: http://www.alistapart.com/articles/sprites/

Oto kod pisałem zaokrąglić narożniki z ImageMagick przy użyciu Perl. powinien to port Ruby dość łatwo:

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

uniwersalne rozwiązanie

To rozwiązanie działa z przezroczystych i nieprzezroczystych obrazów. Aby dodać 15 pikseli promień zaokrąglone narożniki do original_picture.pngktórego jest 100x100 obrazku:

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

Rozwiązanie to zostało wydane przez PM tutaj: https://stackoverflow.com/a/1916256/499917

Eleganckie rozwiązanie, nie działa z przezroczystych obrazów

To rozwiązanie działa bez pośredniego obrazu. Jak miło! Ale będzie to zakłócać przejrzystość swojego oryginalnego obrazu. Więc używać tylko wtedy, gdy masz pewność, że obraz nie jest przezroczysty.

Załóżmy, że chcesz zaokrąglone narożniki o promieniu 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

Dla wygody, tutaj jest to, co zazwyczaj zrobić w Ruby lub kilku innych językach:

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

Źródło: http://www.imagemagick.org/Usage/thumbnails/#rounded