Przycinanie zdjęcia do koła

Użyj narzędzia przycinanie zdjęcia do koła, aby wyciąć zdjęcie, logo lub zrzut ekranu do idealnego koła albo regulowanego owalu i zapisać wynik jako przezroczysty PNG. Przeciągnij obraz wewnątrz okrągłej maski, aby zdecydować, co zostaje, powiększ, aż obiekt wypełni kadr, dodaj pierścień, jeśli chcesz, i pobierz awatar gotowy na profil, stronę zespołu, okładkę podcastu albo slajd.

Wszystko działa w Twojej przeglądarce dzięki elementowi HTML canvas. Zdjęcie jest dekodowane lokalnie, maskowane lokalnie i eksportowane lokalnie, więc nigdy nie jest wysyłane do miniwebtool i nie ma kolejki, znaku wodnego ani limitu wgrywania poza pamięcią Twojego urządzenia.

Co możesz z tym zrobić

Kluczowe funkcje

• Przeciągnij, aby ująć, przewiń lub szczypnij, aby powiększyć: maska zostaje nieruchoma, a zdjęcie przesuwa się za nią — to ta sama interakcja, której używają edytory awatarów.
• Pokaż obszar odcinany: w podglądzie zostaje półprzezroczysty „duch” odrzucanych pikseli, więc widać, czy obciąłeś ucho albo ramię.
• Koło lub owal: suwak wysokości do szerokości zamienia koło w elipsę poziomą lub pionową, a płótno eksportu przyjmuje ten sam kształt.
• Obrót i odbicie lustrzane: kroki co 90 stopni poprawiają zdjęcie z telefonu na boku, a odbicie odwraca selfie we właściwą stronę.
• Pierścień i wygładzona krawędź: dodaj kolorowy pierścień w pikselach wyjściowych albo zmiękcz krawędź, aby awatar wtapiał się w tło.
• Przezroczysty PNG, WebP lub JPG: zostaw puste narożniki w PNG i WebP albo wypełnij je wybranym kolorem w JPG.
• Presety rozmiaru awatara: jedno kliknięcie dla popularnych rozmiarów zdjęcia profilowego 320, 400, 512, 640 i 800 pikseli.
• CSS do skopiowania: fragment odtwarza ten sam okrągły awatar na stronie dzięki border-radius i object-fit.

Jak przyciąć obraz do koła

1. Wczytaj zdjęcie: przeciągnij plik na obszar upuszczania, wybierz Wybierz obraz albo wklej skopiowane zdjęcie skrótem Ctrl+V.
2. Ujmij obiekt: przeciągnij wewnątrz sceny, aby przesunąć zdjęcie, i użyj suwaka Powiększenie, kółka myszy albo gestu szczypnięcia, aby zmienić rozmiar. Wypełnij maskę ustawia najciaśniejszy kadr, który pokrywa maskę, a Dopasuj całe zdjęcie pokazuje całe zdjęcie wewnątrz niej.
3. Wybierz kształt: zostaw Koło albo przełącz na Owal i ustaw stosunek wysokości do szerokości.
4. Ostylizuj krawędź: ustaw Pierścień i jego kolor, zmiękcz krawędź suwakiem Wygładzenie i wybierz Przezroczyste albo jednolite Tło.
5. Sprawdź małe podglądy: spójrz na wersje 128, 64 i 32 piksele pod sceną i powiększ bardziej, jeśli twarz znika.
6. Eksport: wybierz rozmiar i format wyjściowy, a następnie kliknij Pobierz okrągłe zdjęcie.

Rozmiary zdjęć profilowych wyświetlanych jako koła

Większość platform przyjmuje kwadratowy plik i nakłada własną okrągłą maskę w CSS. Eksport już okrągłego PNG nadal przydaje się na strony, dokumenty i slajdy i pozwala dokładnie kontrolować, gdzie wypada maska. Oto bezpieczne rozmiary wgrywania:

Jak rysowana jest okrągła maska

Zdjęcie jest malowane na płótnie w rozmiarze wyjściowym, potem tryb kompozycji płótna przełącza się na destination-in i wypełniana jest elipsa. Przetrwają tylko piksele pod elipsą; wszystko inne staje się w pełni przezroczyste. Gdy Wygładzenie jest większe od zera, elipsa jest wypełniana gradientem radialnym zamiast jednolitego koloru, więc wartość alfa spada stopniowo, a krawędź zanika zamiast kończyć się ostrą linią. Pierścień, jeśli go dodasz, jest obrysowywany potem, aby maska go nie wymazała.

Ponieważ koło jest wpisane w kwadrat, z którego je wycinasz, okrągły wynik zawsze pokrywa około 78,5 procent powierzchni kwadratu, a cztery narożniki to to, co tracisz. Dlatego lekkie powiększenie zwykle jest właściwe dla portretu: czubek głowy i ramiona siedzą dokładnie w narożnikach, które zostają usunięte.

Wskazówki, aby kadr nadal działał przy 32 pikselach

• Wypełnij koło twarzą. Zostaw mały margines nad głową i pozwól ramionom wychodzić poza krawędź; ujęcie całej sylwetki zamienia się w nieczytelną kropkę.
• Umieść oczy nieco powyżej środka. Twarz wyśrodkowana dokładnie na środku koła wygląda, jakby zapadała się w dół.
• Preferuj gładkie, kontrastowe tło. Zatłoczony detal za głową staje się szumem wizualnym po zmniejszeniu awatara.
• Nie powiększaj ponad źródło. Jeśli źródło ma 200 pikseli szerokości, eksport 800 pikseli tylko je rozmywa; eksportuj w rozmiarze ujętego źródła lub mniejszym.
• Dodaj pierścień do ciemnych interfejsów. Biały pierścień o szerokości jednego do dwóch procent zapobiega zlewaniu się ciemnego zdjęcia z ciemnym paskiem czatu.

Często zadawane pytania

Czy moje zdjęcie jest wysyłane na serwer?

Nie. Plik odczytuje Twoja przeglądarka przez FileReader API, rysuje go na płótnie HTML i tam nakłada maskę. Nic nie jest wysyłane do miniwebtool, więc zdjęcie zostaje na Twoim urządzeniu nawet po zamknięciu karty. Oznacza to też, że po wczytaniu strony narzędzie działa przy wolnym połączeniu, a poza pamięcią Twojego urządzenia nie ma kolejki wysyłania ani limitu rozmiaru pliku.

Jak zachować przezroczystość poza kołem?

Ustaw Tło na Przezroczyste i wybierz PNG lub WebP jako format wyjściowy. Tylko te dwa formaty zapisują kanał alfa. JPG w ogóle nie ma przezroczystości, więc cztery narożniki wokół koła są wypełniane kolorem tła, a narzędzie automatycznie przełącza tło na jednolity kolor, gdy wybierzesz JPG.

Dlaczego mój okrągły awatar nadal wygląda na kwadratowy po wgraniu?

Niektóre witryny spłaszczają przezroczystość na białe lub ciemne tło przy ponownym kodowaniu wgranego pliku, przez co przezroczyste narożniki znowu stają się widoczne. Jeśli tak się dzieje, dopasuj kolor tła do witryny zamiast używać przezroczystości albo wgraj kwadratowy oryginał i pozwól stronie nałożyć własną okrągłą maskę, co większość sieci społecznościowych robi w CSS.

Jaki rozmiar powinno mieć okrągłe zdjęcie profilowe?

512 na 512 pikseli pasuje niemal do każdego profilu, bo witryny zmniejszają większy obraz, ale nigdy nie dodają szczegółów do małego. Typowe cele to 400 pikseli dla X i LinkedIn, 320 dla Instagrama, 512 dla Discorda, 640 dla WhatsApp i 800 dla YouTube. Użyj presetów rozmiaru w sekcji Rozmiar wyjściowy i pozwól witrynie zmniejszyć obraz.

Czy mogę przyciąć owal zamiast idealnego koła?

Tak. Przełącz kształt na Owal i przesuń suwak wysokości do szerokości. Stosunek poniżej 100 procent daje szeroką elipsę poziomą, a powyżej 100 procent wysoką elipsę portretową, która pasuje do ujęć głowy i ramion. Płótno wyjściowe zmienia kształt razem z nią, więc owal o szerokości 512 pikseli przy 130 procentach eksportuje się jako 512 na 666 pikseli.

Czy przycinanie do koła obniża jakość zdjęcia?

Samo przycinanie usuwa piksele poza kołem, ale nie kompresuje ponownie tego, co zostaje, gdy eksportujesz PNG, który jest bezstratny. Jakość spada tylko wtedy, gdy rozmiar wyjściowy jest większy niż ujęty obszar oryginału, bo przeglądarka musi wtedy powiększać, albo gdy wybierzesz JPG lub WebP, które są stratne. Powiększenie wyraźnie powyżej 100 procent na małym źródle to najczęstsza przyczyna miękkiego wyniku.

Jakie typy plików mogę otwierać i zapisywać?

Możesz otworzyć wszystko, co Twoja przeglądarka potrafi zdekodować jako obraz, co zwykle obejmuje JPG, PNG, WebP, GIF, BMP, AVIF i SVG. Animowane GIF-y są przycinane jako pojedyncza klatka. Pobrany plik to domyślnie PNG, a WebP i JPG są dostępne na liście Format.