Przytnij obraz _

Jak działa kadrowanie obrazów w przeglądarce

Proces kadrowania działa w całości w karcie przeglądarki przy użyciu Canvas API. Żadnego przetwarzania po stronie serwera, żadnego przesyłania, żadnych zewnętrznych usług. Każdy krok odbywa się na Twoim urządzeniu.

1. Wczytaj obraz do elementu <img>, aby przeglądarka zdekodowała go lokalnie. Nakładka canvas renderuje obraz przeskalowany do viewportu, a przeciągalny prostokąt zaznaczenia pokazuje bieżący obszar kadrowania.
2. Przeciągnij prostokąt za krawędzie lub rogi, aby dopasować obszar kadrowania. Prostokąt jest zablokowany w granicach obrazu, więc nie można zaznaczyć obszaru poza zdjęciem. Gdy aktywny jest stały współczynnik proporcji (1:1, 16:9, 4:3), zmiana rozmiaru automatycznie zachowuje te proporcje.
3. Odczyt pikseli aktualizuje się na bieżąco podczas przeciągania, pokazując bieżącą szerokość, wysokość oraz pozycje X i Y kadrowania we współrzędnych pikseli obrazu. Pozwala to celować w dokładne wymiary bez zgadywania.
4. Po kliknięciu Przytnij i pobierz strona rysuje tylko wybrany obszar obrazu źródłowego na offscreenowym canvasie w oryginalnej rozdzielczości pikseli, a następnie eksportuje wynik przez canvas.toBlob() w tym samym formacie co plik źródłowy. Generowany jest URL Blob do pobrania.

Dlaczego warto kadrować obrazy online?

• Kadrowanie eliminuje niechciane krawędzie, puste przestrzenie lub wizualny bałagan. Pojedyncze kadrowanie często poprawia kompozycję zdjęcia bardziej niż jakikolwiek filtr czy korekta kolorów.
• Kontrola proporcji jest niezbędna na platformach publikacyjnych. Kanały mediów społecznościowych oczekują 1:1 dla profili, 16:9 dla miniaturek wideo i 4:3 dla standardowych zdjęć. Kadrowanie do odpowiednich proporcji zapobiega letterboxingowi lub niechcianemu przycięciu podczas wysyłania.
• Kadrowanie po stronie klienta to jedyna opcja na ograniczonych firmowych urządzeniach bez edytora zdjęć. Ponieważ nic nie jest przesyłane, nie ma ryzyka wycieku danych ani potrzeby przeglądu zgodności dla wrażliwych obrazów.
• Odczyt wymiarów na żywo eliminuje zgadywanie. Widzisz współrzędne pikseli i rozmiar zaznaczenia podczas przeciągania, więc możesz kadrować do dokładnej szerokości i wysokości bez przełączania się na narzędzie pomiarowe.

Typowe zastosowania kadrowania

Kadrowanie to jedna z najczęstszych edycji obrazów w publikacjach internetowych, mediach społecznościowych i tworzeniu oprogramowania. Oto trzy przypadki, w których przycinacz w przeglądarce oszczędza czas.

• Przygotowanie zdjęć produktów do sklepu internetowego. Przytnij do spójnych proporcji 1:1 lub 4:5, aby każda miniatura w aukcji równo układała się w siatce. Eksport zachowuje oryginalny format, więc zdjęcia produktów w formacie JPEG pozostają w JPEG.
• Przycinanie zrzutów ekranu do dokumentacji lub zgłoszeń błędów. Wytnij pasek narzędzi przeglądarki, pasek zadań Windows lub poufne powiadomienia przed dołączeniem obrazu do zgłoszenia lub pull requesta.
• Kadrowanie obrazu hero lub banera na stronę lądowania. Zablokuj preset 16:9, umieść najważniejszą część zdjęcia na środku prostokąta kadrowania i wyeksportuj w oryginalnej rozdzielczości dla najlepszej jakości na wyświetlaczach retina.

Przykład: kadrowanie zdjęcia 4000×3000 do 1200×675 na baner hero

Zdjęcie 4000×3000 pikseli z aparatu cyfrowego jest o wiele za duże na typowy baner hero strony internetowej. Miejsce na baner może mieć 1200×675 (ramka 16:9).

Upuść zdjęcie w strefę wysyłania. Obraz ładuje się w pełnej rozdzielczości, ale skaluje się do viewportu dla wygodnego przeciągania. Wybierz preset proporcji 16:9. Prostokąt kadrowania natychmiast wskakuje na największy obszar 16:9 mieszczący się w obrazie. Przeciągnij prostokąt, aby umieścić punkt centralny — szczyt góry, produkt czy twarz osoby — w kadrze. Odczyt na żywo pokazuje bieżące zaznaczenie jako 4000×2250 (okno 16:9 całego obrazu). Chwyć róg i przeciągnij do wewnątrz, aż odczyt szerokości osiągnie 1200 px. Wysokość podąża automatycznie, ponieważ proporcje są zablokowane. Kliknij Przytnij i pobierz. Strona wyodrębnia wybrany obszar 1200×675 z oryginalnych pikseli i dostarcza przycięty plik w formacie źródłowym. Cały proces trwa sekundę lub dwie i nie zużywa przepustowości sieci poza początkowym ładowaniem strony.

Jakie formaty obrazów są obsługiwane?

Narzędzie akceptuje każdy format, który przeglądarka może zdekodować: PNG, JPEG i WebP pokrywają prawie wszystkie praktyczne przypadki użycia. Przycięty wynik jest zapisywany w tym samym formacie co plik źródłowy. PNG pozostaje bezstratny, JPEG zachowuje swój oryginalny poziom jakości, a WebP pozostaje WebP. Format jest wykrywany na podstawie typu MIME pliku źródłowego.

Czy przycięcie zmniejsza rozmiar pliku?

Kadrowanie usuwa piksele, więc rozmiar pliku wyjściowego jest zazwyczaj mniejszy niż źródła, szczególnie gdy wycinasz duży obszar ramki lub pustą przestrzeń. Eksport używa oryginalnego formatu pliku i jego parametrów kodowania — PNG pozostaje bezstratny, JPEG zachowuje swoje oryginalne ustawienie jakości — więc oszczędności pochodzą wyłącznie ze zmniejszonej liczby pikseli, a nie z ponownej kompresji.

Co robią presety proporcji?

Presety (1:1, 16:9, 4:3, 3:2, 9:16) blokują stosunek szerokości do wysokości prostokąta kadrowania. Gdy preset jest aktywny, przeciąganie dowolnego rogu lub krawędzi zmienia rozmiar zaznaczenia przy zachowaniu stałych proporcji. Przełączenie na tryb dowolny usuwa ograniczenie, umożliwiając dowolną zmianę rozmiaru prostokąta. Proporcje są egzekwowane na współrzędnych pikseli obrazu, więc eksportowany wynik ma dokładnie wybrany współczynnik proporcji.

Czy obraz jest wysyłany na serwer?

Nie. Obraz nigdy nie opuszcza urządzenia. Strona używa File API przeglądarki do odczytania obrazu do pamięci i Canvas API do kadrowania i eksportu. Możesz to zweryfikować, otwierając panel Sieć w DevTools przeglądarki — jedyne żądania wychodzące podczas kadrowania to początkowe ładowanie strony i wywołania reklam. Żadne dane obrazu nie są przesyłane.

Czy mogę przyciąć konkretny obszar, wprowadzając dokładne współrzędne pikseli?

Obecna wersja umożliwia regulację prostokąta kadrowania poprzez przeciąganie w podglądzie obrazu. Możesz odczytać bieżące współrzędne pikseli dla X, Y, szerokości i wysokości zaznaczenia. Bezpośrednie wprowadzanie numeryczne dla prostokąta kadrowania nie jest dostępne w v1, ale jest planowanym usprawnieniem w przyszłej aktualizacji.

Co się dzieje z oryginalnym obrazem?

Oryginalny plik pozostaje na Twoim urządzeniu. Strona odczytuje go do pamięci przeglądarki w celu wyświetlenia i kadrowania, ale nigdy nie modyfikuje pliku źródłowego na dysku. Przycięty wynik to nowy plik, który pobierasz osobno. Oryginał pozostaje nienaruszony w swoim pierwotnym miejscu na komputerze lub telefonie.

Czy istnieje limit rozmiaru pliku dla kadrowania?

Narzędzie honoruje limit 30 MB na plik w strefie wysyłania, aby utrzymać pamięć przeglądarki pod kontrolą na słabszych urządzeniach. Jeśli Twój obraz jest większy niż 30 MB, możesz go najpierw zmniejszyć za pomocą dedykowanego narzędzia do zmiany rozmiaru, a następnie wczytać tutaj do kadrowania.

Czy kadrowanie działa na telefonach i tabletach?

Tak. Uchwyty kadrowania są zaprojektowane z myślą o celownikach dotykowych, a interakcja wykorzystuje zdarzenia wskaźnika, które działają zarówno z kliknięciami myszy, jak i dotknięciami palca. Na ekranie telefonu podgląd obrazu dopasowuje się do dostępnej szerokości, a elementy sterujące układają się pionowo, ułatwiając obsługę jedną ręką.