Hoe RoundCut werkt

Het korte antwoord

RoundCut voert elk gereedschap uit in uw browser met behulp van twee browser-native API’s: de HTML5 Canvas API voor bewerkingen op pixelniveau, en WebAssembly voor het zwaardere werk — coderen/decoderen van afbeeldingsformaten en AI-inferentie. Er wordt niets geüpload. Er wordt niets verwerkt op onze servers, omdat wij geen servers draaien die uw bestanden aanraken.

U kunt dit in ongeveer 30 seconden verifiëren: open de DevTools van uw browser, schakel naar het Network-tabblad, leeg het log en gebruik een willekeurig gereedschap. De enige netwerkverzoeken die u zult zien, zijn voor statische site-assets — HTML, CSS, JavaScript, lettertypen en de WebAssembly- modules. Uw afbeelding verlaat de pagina nooit.

Waarom client-side

De meeste online beeldbewerkingstools werken andersom: u uploadt, een server verwerkt, u downloadt het resultaat. Dat model heeft enkele bekende nadelen — uw bestand staat op andermans machine, u wacht twee keer op de heen- en terugreis, en de beheerder betaalt per CPU-seconde werk, wat verklaart waarom die diensten de neiging hebben accounts, watermerken of betaalde niveaus toe te voegen.

Browsers kunnen het grootste deel van dit werk al jaren native uitvoeren. Het <canvas>-element verwerkt bijsnijden, draaien, verkleinen en hercoderen; WebAssembly stelt ons in staat dezelfde C/Rust-bibliotheken MozJPEG, libwebp, libavif en Oxipng uit te voeren die Squoosh gebruikt, bij bijna native snelheid. Tegen de tijd dat we de 2026-herbouw lanceerden, had de browser de desktop-beeldbewerkingstoolkit feitelijk ingehaald. Er was geen reden meer om een server te betrekken.

Het resultaat is een stack met drie eigenschappen die elkaar versterken: privacy (uw bestand verlaat uw apparaat nooit), snelheid (geen upload, geen wachtrij, geen server-rondreis) en kosten (we leveren statische assets vanaf een CDN voor een paar cent per maand, ongeacht hoeveel mensen de tools gebruiken).

De pipeline, stap voor stap

1. U selecteert een bestand

Wanneer u een afbeelding kiest — via de bestandskiezer, slepen en neerzetten, of plakken — geeft de browser JavaScript een File-object door. JavaScript leest de bytes via de FileReader- of Blob.arrayBuffer()-API. Op geen enkel moment in deze stap wordt het bestand via het netwerk verzonden.

2. De browser decodeert de afbeelding

Moderne browsers kunnen JPG, PNG, WebP, GIF, AVIF en (in Safari en recent Chromium) HEIC native decoderen. We gebruiken createImageBitmap() om de ruwe bytes buiten de hoofdthread om te zetten in een bitmap waarmee de GPU kan werken. Voor HEIC in browsers die het niet native decoderen, vallen we terug op een WebAssembly-decoder die lokaal in uw browser draait.

3. Het gereedschap doet zijn werk

Wat er daarna gebeurt, hangt af van het gereedschap. RoundCut biedt momenteel drie:

• Circle Crop — een Canvas 2D-pixeltransformatie met een cirkelvormig clip-pad. De bitmap wordt getekend in een <canvas> bij de gekozen rotatie en zoom, het cirkelvormige clip wordt toegepast, en het binnenste van de cirkel wordt teruggelezen als ImageData. Cropper.js verwerkt het interactieve bijsnijdkader.
• Compress — hercodeer JPG, PNG, WebP of AVIF met jSquash WebAssembly-modules (MozJPEG, libwebp, libavif, Oxipng). Dit zijn dezelfde upstream-codecs die Squoosh gebruikt. Ze draaien in een Web Worker zodat de UI responsief blijft terwijl een foto van meerdere megapixels wordt gecodeerd, en een naast-elkaar-preview laat u de afweging zien vóór het bevestigen.
• Remove Background — een klein AI-model in ONNX-formaat (een paar MB, eenmalig gedownload en gecached) draait in uw browser via ONNX Runtime Web, met WebAssembly als uitvoerings-backend. De eerste uitvoering downloadt het model; elke volgende is lokaal en onmiddellijk.

4. U downloadt het resultaat

De uitvoer-bitmap wordt gecodeerd in een Blob, ingepakt in een object URL en aangeboden aan het standaard bestand-opslaan-dialoogvenster van uw browser. Waar ondersteund, gebruiken we de File System Access API zodat u de doelmap direct kunt kiezen. Het bestand verschijnt op uw schijf; niets gaat via een server.

Hoe u het zelf kunt verifiëren

De bewering “geen upload” is in twee minuten te controleren. Kies de methode die u wilt:

Methode 1 — Bekijk het Network-tabblad

1. Open RoundCut in een nieuw tabblad.
2. Open DevTools (F12 of rechtsklik → Inspecteren) en schakel naar het Network-tabblad.
3. Klik op de “leegmaken”-knop in het Network-tabblad om opnieuw te beginnen.
4. Gebruik een willekeurig gereedschap: laad een afbeelding, bewerk deze, download het resultaat.
5. Bekijk het Network-log. U ziet verzoeken voor HTML, CSS, JS, lettertypen en (bij eerste gebruik van een zwaarder gereedschap) de relevante WebAssembly-module. U zult geen enkel verzoek zien dat de bytes van uw afbeelding bevat.

De kolom “Initiator” vertelt u welk script elk verzoek heeft geactiveerd, en de kolom “Type” vertelt u wat er is verzonden. Filter op “Fetch/XHR” om u te concentreren op gegevensverzoeken; u zult zien dat ze allemaal klein zijn, allemaal naar de statische oorsprong gaan en geen uw bestand bevatten.

Methode 2 — Gebruik de tools offline

1. Laad een willekeurige RoundCut-toolpagina. Gebruik deze eenmaal om ervoor te zorgen dat de relevante WebAssembly-modules gecached zijn.
2. Open DevTools, ga naar het Network-tabblad en vink het selectievakje Offline aan (of schakel gewoon uw Wi-Fi uit).
3. Herlaad de pagina. Deze laadt nog steeds, omdat de browser de statische assets heeft gecached.
4. Gebruik het gereedschap opnieuw, van begin tot eind. Het werkt nog steeds.

Als het gereedschap offline werkte, heeft het per definitie geen contact gemaakt met een server tijdens de bewerking. Dit is het sterkst mogelijke bewijs — het werk vond plaats op uw machine omdat er geen andere machine bereikbaar was.

Wat wij zien

Om duidelijk te zijn over wat er wordt verzameld: wanneer u een pagina laadt, registreert onze analytics-provider (Cloudflare Web Analytics) dat een browser die URL heeft geladen vanuit een land. Geen cookies, geen persistente identificatoren, niets gekoppeld aan een persoon.

Voor tools die bij het eerste gebruik een WebAssembly-module downloaden (jSquash-codecs, het ONNX- achtergrondverwijderingsmodel), ziet onze hostingprovider dat iemand de module heeft opgehaald — net zoals hij ziet dat iemand het CSS-bestand ophaalt. De module zelf bevat geen informatie over uw afbeelding.

De volledige gegevensinventaris staat in ons privacybeleid.

De technologiestack

Voor de nieuwsgierigen: hier is waarmee RoundCut is gebouwd:

• Astro — de static site generator. Elke pagina wordt verzonden als gewone HTML met progressief verbeterde JavaScript-”islands” alleen waar interactieve tools wonen.
• Vanilla CSS met custom properties — geen Tailwind, geen CSS-in-JS. Het volledige ontwerpsysteem is een enkel tokens.css-bestand.
• jSquash — WebAssembly-bindingen naar MozJPEG, libwebp, libavif en Oxipng voor afbeeldingscodering.
• Cropper.js — de interactielaag van de bijsnijdrechthoek voor de bijsnijdtools.
• ONNX Runtime Web — voert het achtergrondverwijderingsmodel uit in uw browser via WebAssembly.
• Cloudflare Pages — host de statische build, levert deze vanaf de edge en biedt DNS plus DDoS-bescherming.
• Cloudflare Web Analytics — geaggregeerde, cookievrije paginaweergavetelling.

Browserondersteuning

Alle tools werken op de huidige en vorige versie van Chrome, Firefox, Safari en Edge — desktop en mobiel. De site gebruikt progressive enhancement: waar een browser een nieuwere API ondersteunt (bijv. showSaveFilePicker, OffscreenCanvas), gebruiken we die; waar niet, vallen we terug op het oudere equivalent. Er is geen “uw browser wordt niet ondersteund”-muur.

De enige harde vereiste is JavaScript. Met uitgeschakeld JavaScript kunnen de tools niet draaien — er is geen server-side fallback omdat er geen server is die afbeeldingsverwerking doet.

Vragen

Iets wat we niet hebben behandeld? Mail ons op support@araluma.com. Technische vragen zijn van harte welkom.