in meiner Rails - Anwendung möchte ich ein ähnliches Profil Schnitt wie Facebook haben , wo die hochgeladenen Bilder automatisch thumbnailed und Ecke abgerundet sind. Ich bin mit dem convertDienstprogramm , um Bilder in Thumbnails zu verkleinern, aber gibt es eine Möglichkeit , ihre Ecken zu runden? Vielen Dank.
Abgerundet Ecken der Bilder mit ImageMagick
stimmen
8
4 antworten
stimmen 4
4
Hier sind einige abgerundeten Ecken Beispiele: http://www.imagemagick.org/Usage/thumbnails/#rounded_border . Sie erhalten eine Maske von einer Art erstellen müssen (entweder von Hand oder die Zeichenwerkzeuge verwenden) und dann auf das Bild gelegt wird .
stimmen 7
7
Facebook keine Bilder ändern abgerundete Ecken zu haben. Stattdessen verwenden sie HTML und CSS dieses Bild über jeden Benutzer Bild anzuwenden: http://www.facebook.com/images/ui/UIRoundedImage.png
Wenn Sie überprüfen UIRoundedImage.png, werden Sie feststellen , dass jeder „square“ aus einem transparenten Zentrum besteht, und undurchsichtige Ecken, die den Hintergrund passen sollen , auf dem das Bild Benutzer ruhen. Zum Beispiel werden , wenn der Benutzer Bild auf einem weißen Hintergrund ist, dann wissen - opake abgerundete Ecken auf dem Benutzer Bild überlagert werden.
Die CSS - Technik für die Verwendung von nur einem bestimmten Teil UIRoundedImage.pngwird „CSS - Sprites“ genannt. Sie können mehr darüber lesen Sie hier: http://www.alistapart.com/articles/sprites/
stimmen 0
0
Hier ist der Code, den ich schrieb Ecken abzurunden mit ImageMagick Perl. Es sollte Port Ruby ziemlich leicht:
http://article.gmane.org/gmane.comp.video.graphicsmagick.apis/322
stimmen 9
9
universelle Lösung
Diese Lösung arbeitet mit transparenten und nicht-transparenten Bildern. Hinzuzufügen 15 Pixel abgerundeten Ecken abzurunden original_picture.png, das ein 100x100 - Bild:
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
Diese Lösung wurde durch gegeben PM hier: https://stackoverflow.com/a/1916256/499917
Elegante Lösung, funktioniert nicht mit transparenten Bildern
Diese Lösung funktioniert ohne Zwischenbild. Wie schön! Aber es wird Ihre Originalbild der Transparenz stören. Also nur verwenden, wenn Sie sicher sind, dass Ihr Bild nicht transparent ist.
Angenommen, Sie abgerundete Ecken mit 15px Radius wollen:
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
Der Einfachheit halber ist hier, was Sie in der Regel in Ruby oder einige andere Sprachen tun:
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}`
Quelle: http://www.imagemagick.org/Usage/thumbnails/#rounded