Rotunjirea colțuri de imagini cu ImageMagick

Facebook nu modifică imaginile pentru a avea colturi rotunjite. In schimb, ei folosesc HTML si CSS pentru a aplica această imagine peste fiecare imagine utilizator: http://www.facebook.com/images/ui/UIRoundedImage.png

Dacă inspectați UIRoundedImage.png, veți găsi că fiecare „pătrat“ constă dintr - un centru transparent, și colțuri opace , care sunt menite să se potrivească cu fundalul pe care imaginea utilizatorului se va odihni. De exemplu, în cazul în care imaginea de utilizator este pe un fundal alb, apoi alb colțuri rotunjite opace va fi suprapus pe imaginea utilizatorului.

Tehnica CSS pentru utilizarea doar o anumită parte a UIRoundedImage.pngse numește „sprite - uri CSS“. Puteți citi mai multe despre el aici: http://www.alistapart.com/articles/sprites/

Iată codul am scris pentru a rotunji colțuri cu ImageMagick folosind Perl. Acesta ar trebui să port pentru Ruby destul de ușor:

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

soluție universală

Această soluție funcționează cu imagini transparente și netransparente. Pentru a adăuga 15 pixeli raza colturi rotunjite la original_picture.pngcare este o imagine 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

Această soluție a fost dată de PM aici: https://stackoverflow.com/a/1916256/499917

soluție elegantă, nu funcționează cu imagini transparente

Această soluție funcționează fără nici un fel de imagine intermediară. Ce drăguț! Dar va perturba transparența fotografiei originale. Deci, utilizați numai atunci când sunteți sigur că imaginea ta nu este transparent.

Să presupunem că doriți colțuri rotunjite cu raza 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

Pentru comoditate, aici este ceea ce va face în mod obișnuit în Ruby sau alte limbi:

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

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