Jak działa RoundCut

Szczegóły techniczne dotyczące tego, jak narzędzia działają całkowicie w Twojej przeglądarce — i jak możesz to samodzielnie zweryfikować.

Krótka odpowiedź

RoundCut uruchamia każde narzędzie w Twojej przeglądarce, korzystając z dwóch natywnych API przeglądarki: HTML5 Canvas API do operacji na poziomie pikseli oraz WebAssembly do cięższych zadań — kodowania/dekodowania formatów obrazów i wnioskowania AI. Nic nie jest przesyłane. Nic nie jest przetwarzane na naszych serwerach, ponieważ nie prowadzimy serwerów, które dotykają Twoich plików.

Możesz to zweryfikować w około 30 sekund: otwórz DevTools przeglądarki, przejdź do zakładki Network, wyczyść log i skorzystaj z dowolnego narzędzia. Jedyne żądania sieciowe, które zobaczysz, będą dotyczyć statycznych zasobów witryny — HTML, CSS, JavaScript, czcionek i modułów WebAssembly. Twój obraz nigdy nie opuszcza strony.

Dlaczego po stronie klienta

Większość narzędzi do obróbki obrazów online działa odwrotnie: przesyłasz plik, serwer przetwarza, pobierasz wynik. Ten model ma kilka dobrze znanych wad — Twój plik przebywa na cudzym komputerze, czekasz na podróż tam i z powrotem dwa razy, a operator płaci za każdą sekundę procesora, dlatego właśnie te usługi mają tendencję do dodawania kont, znaków wodnych lub płatnych planów.

Przeglądarki od lat potrafią wykonywać większość tej pracy natywnie. Element <canvas> obsługuje przycinanie, obracanie, zmianę rozmiaru i ponowne kodowanie; WebAssembly pozwala nam uruchamiać te same biblioteki C/Rust MozJPEG, libwebp, libavif i Oxipng, których używa Squoosh, z prędkością bliską natywnej. Gdy wypuszczaliśmy przebudowę z 2026 roku, przeglądarka faktycznie nadgoniła zestaw narzędzi do edycji obrazów na komputerze stacjonarnym. Nie było już powodu, by angażować serwer.

Efektem jest stack z trzema wzajemnie wzmacniającymi się właściwościami: prywatność (Twój plik nigdy nie opuszcza Twojego urządzenia), szybkość (bez przesyłania, bez kolejki, bez podróży do serwera i z powrotem) oraz koszt (dostarczamy statyczne zasoby z CDN za grosze miesięcznie, niezależnie od tego, ile osób korzysta z narzędzi).

Potok, krok po kroku

1. Wybierasz plik

Gdy wybierzesz obraz — za pomocą przeglądarki plików, przeciągania i upuszczania lub wklejania — przeglądarka przekazuje JavaScript obiekt File. JavaScript odczytuje bajty za pomocą API FileReader lub Blob.arrayBuffer(). W żadnym momencie tego kroku plik nie jest wysyłany przez sieć.

2. Przeglądarka dekoduje obraz

Nowoczesne przeglądarki potrafią natywnie dekodować JPG, PNG, WebP, GIF, AVIF i (w Safari i najnowszym Chromium) HEIC. Używamy createImageBitmap(), aby poza głównym wątkiem przekształcić surowe bajty w bitmapę, z którą może pracować GPU. W przypadku HEIC w przeglądarkach, które nie dekodują go natywnie, używamy dekodera WebAssembly działającego lokalnie w Twojej przeglądarce.

3. Narzędzie wykonuje swoje zadanie

To, co dzieje się dalej, zależy od narzędzia. RoundCut obecnie zawiera trzy:

  • Circle Crop — transformacja pikseli Canvas 2D z okrągłą ścieżką przycinania. Bitmapa jest rysowana na <canvas> przy wybranej rotacji i zoomie, stosowane jest okrągłe przycinanie, a wnętrze okręgu jest odczytywane z powrotem jako ImageData. Cropper.js obsługuje interaktywną ramkę kadrowania.
  • Compress — ponownie koduje JPG, PNG, WebP lub AVIF za pomocą modułów WebAssembly jSquash (MozJPEG, libwebp, libavif, Oxipng). To te same kody upstream, których używa Squoosh. Działają w Web Worker, dzięki czemu interfejs pozostaje responsywny podczas kodowania zdjęcia o wielu megapikselach, a podgląd obok siebie pozwala zobaczyć kompromis przed potwierdzeniem.
  • Remove Background — mały model AI w formacie ONNX (kilka MB, pobierany raz i buforowany) działa w Twojej przeglądarce przez ONNX Runtime Web, z WebAssembly jako backendem wykonawczym. Pierwsze uruchomienie pobiera model; każde kolejne jest lokalne i natychmiastowe.

4. Pobierasz wynik

Wyjściowa bitmapa jest kodowana w Blob, owijana w object URL i oferowana standardowemu oknu dialogowemu zapisu pliku w przeglądarce. Tam, gdzie jest to obsługiwane, używamy File System Access API, abyś mógł bezpośrednio wybrać folder docelowy. Plik pojawia się na Twoim dysku; nic nie przechodzi przez serwer.

Jak to samodzielnie zweryfikować

Twierdzenie “bez przesyłania” można sprawdzić w dwie minuty. Wybierz którąś z tych metod:

Metoda 1 — Obserwuj zakładkę Network

  1. Otwórz RoundCut w nowej zakładce.
  2. Otwórz DevTools (F12 lub prawy klik → Zbadaj element) i przejdź do zakładki Network.
  3. Kliknij przycisk “wyczyść” w zakładce Network, aby zacząć od nowa.
  4. Skorzystaj z dowolnego narzędzia: załaduj obraz, edytuj go, pobierz wynik.
  5. Przejrzyj log Network. Zobaczysz żądania HTML, CSS, JS, czcionek i (przy pierwszym użyciu cięższego narzędzia) odpowiedniego modułu WebAssembly. Nie zobaczysz żadnego żądania zawierającego bajty Twojego obrazu.

Kolumna “Initiator” mówi Ci, który skrypt wywołał każde żądanie, a kolumna “Type” informuje, co zostało wysłane. Filtruj według “Fetch/XHR”, aby skupić się na żądaniach danych; zobaczysz, że wszystkie są małe, wszystkie kierują się do statycznego źródła i żadne nie zawiera Twojego pliku.

Metoda 2 — Korzystaj z narzędzi offline

  1. Załaduj dowolną stronę narzędzia RoundCut. Skorzystaj z niej raz, aby upewnić się, że odpowiednie moduły WebAssembly są zbuforowane.
  2. Otwórz DevTools, przejdź do zakładki Network i zaznacz pole wyboru Offline (lub po prostu wyłącz Wi-Fi).
  3. Przeładuj stronę. Nadal się ładuje, ponieważ przeglądarka buforowała zasoby statyczne.
  4. Ponownie skorzystaj z narzędzia, od początku do końca. Nadal działa.

Jeśli narzędzie działało offline, z definicji nie kontaktowało się z serwerem podczas operacji. To najsilniejszy możliwy dowód — praca odbywała się na Twoim komputerze, ponieważ żaden inny komputer nie był osiągalny.

Co widzimy

Dla jasności co do tego, co jest zbierane: gdy ładujesz stronę, nasz dostawca analityki (Cloudflare Web Analytics) rejestruje, że pewna przeglądarka załadowała ten URL z pewnego kraju. Bez ciasteczek, bez trwałych identyfikatorów, nic powiązanego z osobą.

W przypadku narzędzi, które przy pierwszym użyciu pobierają moduł WebAssembly (kodeki jSquash, model ONNX usuwania tła), nasz dostawca hostingu widzi, że ktoś pobrał moduł — tak samo jak widzi, że ktoś pobierał plik CSS. Sam moduł nie zawiera żadnych informacji o Twoim obrazie.

Pełny inwentarz danych znajduje się w naszej polityce prywatności.

Stos technologiczny

Dla ciekawych — oto na czym zbudowany jest RoundCut:

  • Astro — generator stron statycznych. Każda strona jest dostarczana jako zwykły HTML z progresywnie ulepszonymi JavaScript “islands” tylko tam, gdzie znajdują się interaktywne narzędzia.
  • Vanilla CSS z właściwościami niestandardowymi — bez Tailwind, bez CSS-in-JS. Cały system projektowania to jeden plik tokens.css.
  • jSquash — powiązania WebAssembly z MozJPEG, libwebp, libavif i Oxipng do kodowania obrazów.
  • Cropper.js — warstwa interakcji prostokąta przycinania dla narzędzi do kadrowania.
  • ONNX Runtime Web — uruchamia model usuwania tła w Twojej przeglądarce przez WebAssembly.
  • Cloudflare Pages — hostuje statyczny build, dostarcza go z edge i zapewnia DNS oraz ochronę przed DDoS.
  • Cloudflare Web Analytics — zagregowane, pozbawione ciasteczek zliczanie odsłon stron.

Obsługa przeglądarek

Wszystkie narzędzia działają w bieżącej i poprzedniej wersji Chrome, Firefox, Safari i Edge — na komputerze i urządzeniach mobilnych. Witryna używa progresywnego ulepszania: gdzie przeglądarka obsługuje nowsze API (np. showSaveFilePicker, OffscreenCanvas), używamy go; gdzie nie obsługuje, używamy starszego odpowiednika. Nie ma ściany “Twoja przeglądarka nie jest obsługiwana”.

Jedynym twardym wymaganiem jest JavaScript. Bez JavaScript narzędzia nie mogą działać — nie ma zapasowego rozwiązania po stronie serwera, ponieważ nie ma serwera wykonującego przetwarzanie obrazów.

Pytania

Coś, czego nie omówiliśmy? Napisz do nas na support@araluma.com. Pytania techniczne są mile widziane.