Sarkok kerekítés képek ImageMagick

Facebook nem módosítja képeket, hogy lekerekített sarkokkal. Ehelyett a HTML és CSS alkalmazni ezt a képet az egyes felhasználói kép: http://www.facebook.com/images/ui/UIRoundedImage.png

Ha vizsgáljuk UIRoundedImage.png, akkor látjuk, hogy minden „szögletes” olyan átlátszó központ, és átlátszatlan sarkok, amelyek célja, hogy megfeleljen a háttérben, amikor a felhasználó képet fog pihenni. Például, ha a felhasználó kép fehér alapon, majd fehér, átlátszatlan lekerekített sarkok átfedi a felhasználói képet.

A CSS technika segítségével csak egy meghatározott részét UIRoundedImage.pngaz úgynevezett „CSS sprite”. Elolvashatja többet róla itt: http://www.alistapart.com/articles/sprites/

Itt a kód írtam, hogy kerek sarkokat ImageMagicknek Perl. Meg kell portot Ruby viszonylag könnyen:

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

Univerzális megoldás

Ez a megoldás működik átlátszó és nem átlátszó képeket. Ahhoz, hogy adjunk hozzá 15 pixel sugár lekerekített sarkok, hogy original_picture.pngami egy 100x100 képet:

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

Ezt az oldatot adott PM itt: https://stackoverflow.com/a/1916256/499917

Elegáns megoldás, nem működik átlátszó képek

Ez a megoldás minden közbenső kép. De kedves! De ez megzavarhatja az eredeti kép átláthatóságot. Tehát csak akkor használja, ha biztosak vagyunk abban, hogy a kép nem átlátszó.

Tegyük fel, hogy a lekerekített sarkok 15px sugár:

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

Az egyszerűség kedvéért, itt van, amit általában csinálni Ruby vagy más nyelveken:

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

Forrás: http://www.imagemagick.org/Usage/thumbnails/#rounded