Zaoblení rohů snímků s ImageMagicku

Facebook není upravovat obrázky, aby měla zaoblené rohy. Místo toho používají HTML a CSS použít tento obrázek na každý uživatelský obrázku: http://www.facebook.com/images/ui/UIRoundedImage.png

Máte-li kontrolovat UIRoundedImage.png, zjistíte, že každý „čtverec“ se skládá z průhledného centra a neprůhledné rohy, které jsou určeny tak, aby odpovídaly pozadí, na kterém bude uživatel obraz odpočinku. Například, pokud uživatel obraz na bílém pozadí, pak bílé neprůhledné zaoblené rohy budou překryty na obrázek uživatele.

CSS technika pro používání jen určitou část UIRoundedImage.pngse nazývá „CSS sprite“. Můžete si přečíst více o tom zde: http://www.alistapart.com/articles/sprites/

Zde je kód, který jsem napsal zaoblenými rohy s ImageMagick pomocí Perl. Mělo by port Ruby poměrně snadno:

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

univerzální řešení

Toto řešení pracuje s průhlednými a neprůhlednými snímků. Chcete-li přidat 15 bodů poloměru zaoblené rohy original_picture.png, což je 100x100 obrázek:

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

Toto řešení bylo dáno PM zde: https://stackoverflow.com/a/1916256/499917

Elegantní řešení, nepracuje s průhlednými obrázky

Toto řešení pracuje bez jakéhokoliv mezilehlého záznamu. Jak milé! Ale to bude narušit transparentnost své původní obrázku. Takže používat pouze tehdy, když jste si jisti, že váš obrázek není transparentní.

Předpokládejme, že chcete zaoblené rohy s poloměrem 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

Pro větší pohodlí, zde je to, co se obvykle dělat v Ruby nebo některých jiných jazycích:

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

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