in meiner Rails App Ich möchte einen ähnlichen Profilabschnitt wie Facebook haben, wo hochgeladene Bilder automatisch thumbnailed und ecke-gerundet werden. Ich verwende das Dienstprogramm convert , um Bilder in Miniaturansichten zu verkleinern, aber gibt es auch eine Möglichkeit, ihre Ecken abzurunden? Danke.
Hier sind einige Beispiele für abgerundete Ecken: Ссылка . Sie müssen eine Maske erstellen (entweder von Hand oder mit den Zeichenwerkzeugen) und sie dann Ihrem Bild überlagern.
Universelle Lösung
Diese Lösung arbeitet mit transparenten und nicht transparenten Bildern. Um 15 Pixel Radius abgerundete Ecken zu original_picture.png hinzuzufügen, was ein 100x100 Bild ist:
Diese Lösung wurde von PM hier gegeben: Ссылка
Elegante Lösung, funktioniert nicht mit transparenten Bildern
Diese Lösung funktioniert ohne Zwischenbild. Wie schön! Aber es wird die Transparenz Ihres ursprünglichen Bildes stören. Verwenden Sie diese Funktion nur, wenn Sie sicher sind, dass Ihr Bild nicht transparent ist.
Angenommen, Sie möchten abgerundete Ecken mit einem Radius von 15px:
%Vor%Aus praktischen Gründen können Sie in Ruby oder einigen anderen Sprachen Folgendes tun:
%Vor%Quelle: Ссылка
Facebook ändert keine Bilder mit abgerundeten Ecken. Stattdessen verwenden sie HTML und CSS, um dieses Bild auf jedes Benutzerbild anzuwenden: Ссылка
Wenn Sie UIRoundedImage.png inspizieren, werden Sie feststellen, dass jedes "Quadrat" aus einer transparenten Mitte und opaken Ecken besteht, die dem Hintergrund entsprechen sollen, auf dem das Benutzerbild ruht. Wenn sich das Benutzerbild beispielsweise auf einem weißen Hintergrund befindet, werden dem Benutzerbild weiße undurchsichtige abgerundete Ecken überlagert.
Die CSS-Technik zur Verwendung nur eines bestimmten Teils von UIRoundedImage.png wird "CSS-Sprites" genannt. Sie können mehr darüber hier lesen: Ссылка
Hier ist der Code, den ich geschrieben habe, um mit ImageMagick mit Perl zu runden. Es sollte relativ leicht nach Ruby portiert werden:
Tags und Links ruby-on-rails facebook image-manipulation imagemagick
