Generator obrazu z zaokrąglonymi rogami

Czym ten zaokrąglacz się wyróżnia: każdy róg może mieć własny promień, promień można podać w pikselach albo jako procent krótszego boku, a sam róg może być zwykłym łukiem zaokrąglonym, gładkim squircle, prostym ścięciem albo skierowanym do wewnątrz wcięciem. Narzędzie wypisuje też pasującą regułę CSS border-radius, więc ten sam kształt można odtworzyć w kodzie zamiast jako plik.

Po co zaokrąglać rogi obrazu?

Jak dodać zaokrąglone rogi do obrazu

1. Wczytaj obraz. Przeciągnij plik na obszar upuszczania albo wybierz Wybierz obraz. JPG, PNG, WebP, GIF, BMP, AVIF i SVG działają, o ile przeglądarka potrafi je zdekodować.
2. Ustaw promień. Przeciągnij jeden z okrągłych uchwytów rogów na podglądzie, przesuń suwak Promień rogu albo wpisz dokładną liczbę i przełącz jednostkę między px i %.
3. Wybierz styl rogu. Zaokrąglone, Squircle, Ścięcie albo Wcięcie. Wyłącz Połącz wszystkie rogi, aby nadać każdemu rogowi własną wartość, ułożoną na ekranie dokładnie jak rogi, którymi sterują.
4. Dodaj dopełnienie, tło albo obramowanie, jeśli chcesz. Dopełnienie powiększa kanwę wokół obrazu, tło ją wypełnia, a pierścień obramowania podąża za zaokrąglonym konturem zamiast za starym prostokątem.
5. Pobierz. Zostaw PNG dla prześwitujących rogów, a następnie kliknij Pobierz obraz. Panel podaje wymiary eksportu i rozmiar pliku, a pole CSS pokazuje równoważną regułę arkusza stylów.

Promień w pikselach czy w procentach

Promień w pikselach jest bezwzględny: 32 px to 32 px niezależnie od tego, czy obraz ma 400, czy 4000 pikseli szerokości, więc ta sama wartość wygląda dramatycznie na małej miniaturce i jest ledwo widoczna na dużym zdjęciu. Promień w procentach jest mierzony względem krótszego boku obrazu, więc skaluje się wraz ze zdjęciem i wygląda tak samo w każdym eksporcie. 50% to maksymalna użyteczna wartość i daje koło na kwadratowym obrazie oraz pigułkę na prostokącie.

Cztery style rogów

• Zaokrąglone — ćwiartka koła, ta sama geometria, jaką przeglądarka rysuje dla border-radius. Przewidywalne i jedyny styl, który mapuje się jeden do jednego na CSS.
• Squircle — róg w stylu superelipsy. Krzywa zaczyna się dalej wzdłuż każdej krawędzi i wpływa w prosty bok bez nagłej zmiany krzywizny, jaką ma koło, dlatego wytyczne ikon aplikacji na iOS i Androidzie używają tego kształtu.
• Ścięcie — róg jest odcięty prostą przekątną. Ostrzejsze i bardziej techniczne niż krzywa, a przy małych rozmiarach pozostaje wyraźne.
• Wcięcie — łuk wygina się do wewnątrz, usuwając wklęsłe wygryzienie. Dwa wcięte rogi po przeciwnych stronach od razu kojczą się jak bilet albo znacznik.

Wybór formatu wyjściowego

Ponieważ JPG nie ma kanału alfa, eksport wypełnia wycięte rogi wybranym kolorem tła zamiast zostawiać je puste. Często właśnie o to chodzi — białe zaokrąglone zdjęcie na białej stronie — ale to nie jest przezroczystość i później nie da się tego cofnąć.

Kluczowe funkcje

• Prywatność z założenia: plik jest odczytywany przez FileReader API przeglądarki i rysowany lokalnie na kanwie. Nigdy nie jest przesyłany.
• Edycja przeciąganiem rogu: pociągnij uchwyt po przekątnej na podglądzie i obserwuj, jak promień podąża za palcem lub kursorem.
• Sterowanie każdym rogiem: zaokrąglij tylko dwa górne rogi albo wcięcie z jednej strony, a resztę zostaw kwadratową.
• Tła podglądu: przełączaj między szachownicą przezroczystości, bielą, ciemnym tłem i gradientem koloru, aby sprawdzić krawędź alfa przed pobraniem.
• Dopełnienie, wypełnienie tła i pierścień obramowania, które wszystkie podążają za tym samym zaokrąglonym konturem.
• Skala wyjściowa: eksportuj w oryginalnej rozdzielczości albo zmniejsz do 75%, 50% lub 25% w tym samym przebiegu.
• CSS do skopiowania: wygenerowana reguła border-radius odtwarza ten sam kształt w arkuszu stylów, gdy plik nie jest właściwą odpowiedzią.
• Wygładzone krawędzie: róg jest rysowany jako ścieżka przycinania, więc krzywa pozostaje gładka zamiast pokazywać schodkowaną, poszarpana krawędź.

Plik obrazu czy CSS?

Jeśli zaokrąglony obraz trafia do prezentacji, PDF, podpisu e-mail, oferty w marketplace albo dowolnego narzędzia, które nie uruchomi Twojego arkusza stylów, potrzebujesz prawdziwego pliku z prawdziwą przezroczystością — wyeksportuj PNG. Jeśli trafia na stronę, którą kontrolujesz, reguła CSS jest lżejsza, pozostaje ostra w każdym rozmiarze i łatwiej ją później zmienić; skopiuj fragment. Oba podejścia się nie wykluczają: wiele zespołów wysyła PNG na zewnątrz, a CSS zostawia na stronie.

Rozwiązywanie problemów

• Róg wygląda na poszarpany: źródło jest prawdopodobnie już małe. Zaokrąglaj w największej dostępnej rozdzielczości, a potem zmniejszaj, zamiast zaokrąglać obraz, który został powiększony.
• Na ciemnym tle pojawia się cienka jasna otoczka: obraz miał wtopioną białą matę. Dodaj jeden lub dwa piksele dopełnienia w pasującym kolorze albo nieco zwiększ promień, aby otoczka została odcięta.
• Pobrany plik otwiera się jako biały kwadrat: format to JPG albo tło nie jest ustawione na Przezroczysty. Zmień format wyjściowy na PNG.
• Bardzo duże zdjęcie działa wolno: kanwa przerysowuje obraz w pełnej rozdzielczości przy każdym ruchu suwaka. Puść suwak i daj przeglądarce chwilę albo zmniejsz skalę wyjściową.
• Animowany GIF traci animację: kanwa eksportuje jedną klatkę. Zaokrąglana i zapisywana jest tylko pierwsza klatka.

Najczęściej zadawane pytania

Czy mój obraz jest przesyłany na serwer?

Nie. Plik jest odczytywany przez przeglądarkę za pomocą FileReader API i rysowany na kanwie HTML na Twoim urządzeniu. Nic nie jest wysyłane do miniwebtool, więc prywatne zrzuty ekranu, grafiki klientów i osobiste zdjęcia nigdy nie opuszczają komputera. Sama strona nadal wymaga połączenia z internetem, aby się wczytać.

Dlaczego zaokrąglone rogi wyglądają na białe lub czarne zamiast przezroczystych?

Tylko PNG i WebP mogą przechowywać przezroczystość. Jeśli eksportujesz JPG, format nie ma kanału alfa, więc wycięte rogi są wypełniane kolorem tła. Wybierz PNG na liście Format i ustaw tło na Przezroczysty. Jeśli rogi nadal wyglądają źle, sprawdź, czy aplikacja lub witryna, do której wklejasz, obsługuje alfa, ponieważ niektóre edytory spłaszczają przezroczystość PNG na białe tło.

Jak zrobić idealnie okrągły obraz?

Przełącz jednostkę promienia na procenty i ustaw promień na 50%. Na kwadratowym obrazie daje to idealne koło. Na prostokącie powstaje kształt pigułki albo stadionu, ponieważ promień procentowy jest mierzony względem krótszego boku. Użyj presetu Koło, aby przyciąć do kwadratu i zaokrąglić jednym kliknięciem.

Jaka jest różnica między rogami zaokrąglonymi, squircle, ścięciem i wcięciem?

Zaokrąglone to zwykła ćwiartka koła, ten sam kształt, jaki rysuje CSS border-radius. Squircle rozciąga krzywą dalej wzdłuż każdej krawędzi, dzięki czemu połączenie jest gładkie i ciągłe — to wygląd ikon aplikacji iOS i Android. Ścięcie odcina róg prostą linią ukośną. Wcięcie wygina się do wewnątrz zamiast na zewnątrz i wycina wklęsłe wygryzienie z każdego rogu, co pasuje do biletów, kuponów i odznak.

Czy promień w pikselach zgadza się z CSS border-radius na mojej stronie?

Promień jest stosowany w pikselach samego obrazu, więc zgadza się z CSS tylko wtedy, gdy obraz jest wyświetlany w naturalnym rozmiarze. Eksport o szerokości 1200 pikseli pokazany w kolumnie o szerokości 600 pikseli jest przeskalowany o połowę, więc promień 48 pikseli wygląda na ekranie jak 24 piksele. Użyj jednostki procentowej, aby wynik był niezależny od rozmiaru, albo skopiuj fragment CSS generowany przez narzędzie, który już podaje przeskalowany odpowiednik.

Czy mogę zachować jakość obrazu i oryginalną rozdzielczość?

Tak. Eksport zachowuje oryginalne wymiary w pikselach, chyba że zmienisz skalę wyjściową lub dodasz dopełnienie, a PNG jest bezstratny, więc nic nie jest ponownie kompresowane. Zmieniają się tylko piksele rogów, z nieprzezroczystych na przezroczyste. WebP i JPG są stratne, więc używaj ich, gdy rozmiar pliku jest ważniejszy niż dokładna kopia pikseli źródłowych.