Przewodnik po tworzeniu kolaży zdjęć

Łącz wiele zdjęć w kolaże typu siatka, dowolne lub w stylu magazynowym. Dostosuj odstępy, obramowania, kolor tła i proporcje. Wszystkie operacje odbywają się lokalnie w Twojej przeglądarce — bez przesyłania plików na serwer.

Czego potrzebujesz

Przeglądarka — Chrome, Firefox, Safari lub Edge z obsługą OffscreenCanvas Formaty — JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP lub TIFF Limit — 20 MB na plik (każdy plik przekraczający 20 MB zostanie odrzucony) Konto — Nie jest wymagane Internet — Nie jest potrzebny po załadowaniu strony

Tworzenie kolażu

Otwórz narzędzie Image Collage w przeglądarce. Przeciągnij wiele plików graficznych z menedżera plików i upuść je w strefie przesyłania. Alternatywnie kliknij obszar przesyłania, aby wybrać wiele plików z urządzenia.

Każdy plik musi być mniejszy niż 20 MB — pliki przekraczające ten limit zostaną odrzucone. Wybierz typ układu: siatka, dowolny lub magazynowy. Siatka układa zdjęcia w równych wierszach i kolumnach.

Układ dowolny pozwala przeciągać i ustawiać każde zdjęcie w dowolnym miejscu na płótnie. Układ magazynowy stosuje styl redakcyjny z mieszanymi rozmiarami i pozycjami. Ustaw kolor tła za pomocą próbnika kolorów.

Dostosuj odstępy między zdjęciami za pomocą suwaka. Dodaj obramowania, ustawiając ich szerokość i kolor. W układach siatki wybierz liczbę kolumn.

W układach magazynowych dostosuj proporcje płótna. Kliknij przycisk generowania. Interfejs API OffscreenCanvas łączy wszystkie obrazy na jednym płótnie.

libvips pozycjonuje każdy obraz zgodnie z wybranym układem, stosuje odstępy i obramowania oraz wypełnia tło. Żadne dane nie są przesyłane przez sieć. Po wygenerowaniu kolażu pojawi się przycisk pobierania.

Kliknij go, aby zapisać kolaż na swoim urządzeniu. Przeglądarka zapisuje plik bezpośrednio z pamięci na dysk. Po pobraniu libvips automatycznie zwalnia tymczasowe bufory pamięci.

Jak to działa

Narzędzie Image Collage wykorzystuje interfejs API OffscreenCanvas do łączenia wielu obrazów na jednym płótnie. Gdy przesyłasz zdjęcia, przeglądarka odczytuje je bezpośrednio do pamięci — nie dochodzi do przesyłania na serwer.

libvips oblicza wymiary płótna na podstawie wybranego układu i liczby zdjęć. W przypadku układów siatki dzieli płótno na równe komórki, obliczając wymiary wierszy i kolumn na podstawie całkowitej liczby zdjęć i ustawienia kolumn, zapewniając każdej komórce równy przydział pikseli. W przypadku układów dowolnych używa domyślnego rozmieszczenia, które możesz zmodyfikować, przeciągając każde zdjęcie w dowolne współrzędne płótna.

W przypadku układów magazynowych stosuje zasady redakcyjne dla mieszanych rozmiarów, gdzie większe zdjęcia otrzymują więcej miejsca na płótnie, a mniejsze wypełniają luki wokół nich.

Każdy obraz jest rysowany na płótnie w obliczonej pozycji przy użyciu renderowania OffscreenCanvas. libvips stosuje odstępy między zdjęciami, pozostawiając luki między granicami komórek, dodaje obramowania poprzez rysowanie prostokątów o wybranej szerokości i kolorze oraz wypełnia tło przy użyciu wartości z próbnika kolorów przed połączeniem obrazów.

Po połączeniu libvips konwertuje płótno na obraz PNG lub JPEG przy użyciu metody toBlob, która koduje dane pikseli do wybranego formatu. Wynikowy obiekt binarny jest dostarczany przez URL. createObjectURL, tworząc tymczasowy wskaźnik odniesienia do pamięci, którego przeglądarka używa do udostępnienia pliku do pobrania.

Po zakończeniu pobierania libvips wywołuje URL. revokeObjectURL, aby zwolnić przydzieloną pamięć.

Pliki są przetwarzane w całości wewnątrz Twojej przeglądarki przy użyciu OffscreenCanvas. Nigdy nie są przesyłane na serwery ConvertCraft. Twoje oryginalne pliki pozostają na urządzeniu — libvips odczytuje je do pamięci, tworzy kolaż i usuwa bufory pikseli po pobraniu.

Gdy coś pójdzie nie tak

Niektóre pliki nie przesyłają się: Te pliki przekraczają limit 20 MB. OffscreenCanvas działa w ramach ścisłych limitów pamięci. Przetwarzanie obrazów większych niż 20 MB wymaga ogromnych nieskompresowanych buforów pikseli w pamięci RAM, co może spowodować zawieszenie karty przeglądarki.

Obrazy wydają się zniekształcone: Układ kolażu skaluje obrazy, aby dopasować je do komórek, co może zniekształcać proporcje. Użyj opcji oryginalnych proporcji lub dostosuj wymiary komórek do swoich zdjęć.

Płótno jest zbyt duże: Zbyt wiele zdjęć o wysokiej rozdzielczości tworzy bardzo duże płótno. Przeglądarce może zabraknąć pamięci. Zmniejsz liczbę zdjęć lub użyj plików źródłowych o niższej rozdzielczości.

Kolaż wygląda na źle wyrównany: Układy siatki wymagają zdjęć o spójnych wymiarach. Niedopasowane proporcje powodują nierówne odstępy. Przytnij zdjęcia do spójnych wymiarów przed przesłaniem.

### Ile zdjęć mogę dołączyć?

Praktyczny limit zależy od dostępnej pamięci Twojej przeglądarki. libvips przetwarza obrazy sekwencyjnie, aby zarządzać ograniczeniami pamięci. Jeśli napotkasz spowolnienia lub awarie, spróbuj zmniejszyć liczbę zdjęć.

### Czy mogę dostosować pozycje poszczególnych zdjęć?

Układy dowolne pozwalają na przeciąganie każdego zdjęcia w dowolne miejsce na płótnie. Układy siatki i magazynowe używają stałych reguł pozycjonowania. Przełącz się na tryb dowolny, aby uzyskać ręczną kontrolę nad rozmieszczeniem każdego zdjęcia.

### W jakim formacie jest wynikowy plik?

Kolaż jest domyślnie zapisywany jako obraz PNG dla zachowania bezstratnej jakości. Możesz wybrać JPEG dla mniejszych rozmiarów plików z kompresją stratną. Wybór formatu jest dostępny przed pobraniem.