Przejdź do głównej treści
LibraTool logoLibraTool

Kadrowanie obrazu za darmo

Kadruj obrazy za pomocą przeciągania do zaznaczenia, opcjonalnych ograniczeń proporcji (1:1, 16:9, 4:3 itp.), siatki reguły trójpodziału i eksportu w wielu formatach (JPEG, PNG, WebP).

Działa offline po wczytaniu

Upuść plik tutaj lub kliknij, aby przeglądać

JPG, PNG, WebP, HEIC, HEIF · przetwarzane na Twoim urządzeniu

lub naciśnij Ctrl+V, aby wkleić ze schowka

Przeglądaj pliki

Wskazówka: zrzut ekranu możesz wkleić skrótem Ctrl+V

Twoje pliki nigdy nie opuszczają urządzenia. Całe przetwarzanie odbywa się lokalnie w przeglądarce.

Typowe zastosowania

  • Przycnij Zdjęcia na InstagramPrzycnij do preferowanych proporcji Instagram: 1:1 (kwadrat), 4:5 (portret) i 1.91:1 (krajobraz).
  • Przycnij Zdjęcia Profilowe na KwadratTwórz kwadratowe zdjęcia profilowe dla LinkedIn, Twitter, GitHub lub dowolnej platformy mediów społecznościowych.
  • Przycnij Miniatury YouTube i ArtykułówPrzycnij do proporcji 16:9 używanego przez filmy YouTube i większość zdjęć bohaterów blogów.
  • Przycnij Zdjęcia Paszportu / IDPrzycnij zdjęcia do standardowej proporcji portretu 2:3 dla aplikacji paszportowych, wizowych i ID.
  • Przycnij Zdjęcia Produktów E-CommerceUstandaryzuj proporcje zdjęć produktów dla Amazon, Shopify, Etsy i innych rynków.

Jak to działa

Kadrowanie odbywa się w całości w przeglądarce za pomocą HTML5 Canvas API — bez przesyłania i serwera. Zaznaczasz obszar przeciągając bezpośrednio po elemencie canvas, a po zastosowaniu kadrowania wbudowany silnik renderowania 2D przeglądarki odczytuje tylko zaznaczone piksele i ponownie koduje je do JPEG, PNG lub WebP.

  1. 1
    Obraz wczytany do pamięci
    Plik jest odczytywany przez URL.createObjectURL(), które przekazuje przeglądarce lokalny adres blob. HTMLImageElement dekoduje plik w całości w karcie przeglądarki — bajty obrazu nigdy nie opuszczają urządzenia.
  2. 2
    Zdarzenia wskaźnika sterują zaznaczeniem
    Pointer Events API przeglądarki (które ujednolica mysz, dotyk i pióro) śledzi przeciąganie na nakładce płótna. Naciśnięcie poza zaznaczeniem rozpoczyna nowy prostokąt; naciśnięcie wewnątrz go przesuwa; naciśnięcie przy prawym dolnym rogu zmienia rozmiar. Opcjonalne gotowe proporcje (1:1, 16:9, 4:3 itd.) ograniczają geometrię podczas przeciągania.
  3. 3
    Canvas rysuje podgląd na żywo
    Przy każdej zmianie kadru kontekst Canvas 2D przerysowuje obraz, nakłada ciemną warstwę poza zaznaczeniem, czyści obszar kadru, aby pokazać oryginalny obraz w pełnej jakości, i nakłada siatkę trójpodziału oraz turkusowy uchwyt zmiany rozmiaru.
  4. 4
    toBlob() koduje i dostarcza wynik
    Po kliknięciu Przytnij tworzone jest nowe niewidoczne płótno o dokładnych wymiarach kadru. ctx.drawImage() kopiuje tylko zaznaczony prostokąt, a canvas.toBlob() koduje wynik natywnym koderem JPEG, PNG lub WebP przeglądarki z wybraną jakością. Wynik jest przekazywany jako lokalny adres blob do pobrania.

Twój obraz jest otwierany jako lokalny adres blob i przetwarzany w całości w karcie przeglądarki — nic nigdy nie jest przesyłane na żaden serwer.

Powiązane narzędzia

Często zadawane pytania