Cara kerja RoundCut

Detail teknis tentang bagaimana alat-alat berjalan sepenuhnya di browser Anda — dan bagaimana Anda dapat memverifikasinya sendiri.

Jawaban singkatnya

RoundCut menjalankan setiap alat di browser Anda menggunakan dua API bawaan browser: HTML5 Canvas API untuk operasi tingkat piksel, dan WebAssembly untuk pekerjaan yang lebih berat — pengkodean/pendekodan format gambar dan inferensi AI. Tidak ada yang diunggah. Tidak ada yang diproses di server kami, karena kami tidak menjalankan server yang menyentuh file Anda.

Anda bisa memverifikasi ini dalam sekitar 30 detik: buka DevTools browser Anda, beralih ke tab Network, kosongkan log, dan gunakan alat apa pun. Satu-satunya permintaan jaringan yang akan Anda lihat adalah untuk aset situs statis — HTML, CSS, JavaScript, font, dan modul WebAssembly. Gambar Anda tidak pernah meninggalkan halaman.

Mengapa sisi klien

Sebagian besar alat gambar online bekerja sebaliknya: Anda unggah, server memproses, Anda unduh hasilnya. Model ini memiliki beberapa kekurangan yang sudah dikenal — file Anda berada di mesin orang lain, Anda menunggu dua kali perjalanan pulang-pergi, dan operator membayar per CPU-detik pekerjaan, itulah mengapa layanan-layanan tersebut cenderung menambahkan akun, tanda air, atau tingkatan berbayar.

Browser telah mampu melakukan sebagian besar pekerjaan ini secara asli selama bertahun-tahun. Elemen <canvas> menangani pemotongan, rotasi, pengubahan ukuran, dan pengkodean ulang; WebAssembly memungkinkan kami menjalankan pustaka C/Rust MozJPEG, libwebp, libavif, dan Oxipng yang sama yang digunakan Squoosh, dengan kecepatan mendekati asli. Saat kami meluncurkan pembangunan ulang 2026, browser secara efektif telah menyamai perangkat pengeditan gambar desktop. Tidak ada lagi alasan untuk melibatkan server.

Hasilnya adalah tumpukan dengan tiga properti yang saling memperkuat: privasi (file Anda tidak pernah meninggalkan perangkat Anda), kecepatan (tidak ada unggahan, tidak ada antrean, tidak ada perjalanan pulang-pergi ke server), dan biaya (kami menyajikan aset statis dari CDN dengan biaya sen per bulan, terlepas dari berapa banyak orang yang menggunakan alat-alat tersebut).

Pipeline, langkah demi langkah

1. Anda memilih file

Ketika Anda memilih gambar — melalui pemilih file, seret dan lepas, atau tempel — browser menyerahkan objek File ke JavaScript. JavaScript membaca byte-byte menggunakan API FileReader atau Blob.arrayBuffer(). Pada titik mana pun dalam langkah ini, file tidak dikirim melalui jaringan.

2. Browser mendekode gambar

Browser modern dapat mendekode JPG, PNG, WebP, GIF, AVIF, dan (di Safari dan Chromium terbaru) HEIC secara asli. Kami menggunakan createImageBitmap() untuk mengubah byte-byte mentah menjadi bitmap yang dapat digunakan GPU, di luar thread utama. Untuk HEIC di browser yang tidak mendekodenya secara asli, kami menggunakan decoder WebAssembly yang berjalan secara lokal di browser Anda.

3. Alat melakukan tugasnya

Apa yang terjadi selanjutnya bergantung pada alatnya. RoundCut saat ini menyertakan tiga:

  • Circle Crop — transformasi piksel Canvas 2D dengan jalur klip melingkar. Bitmap digambar ke dalam <canvas> pada rotasi dan zoom yang dipilih, klip lingkaran diterapkan, dan bagian dalam lingkaran dibaca kembali sebagai ImageData. Cropper.js menangani bingkai potong interaktif.
  • Compress — mengkodekan ulang JPG, PNG, WebP, atau AVIF menggunakan modul WebAssembly jSquash (MozJPEG, libwebp, libavif, Oxipng). Ini adalah codec upstream yang sama yang digunakan oleh Squoosh. Mereka berjalan di Web Worker sehingga UI tetap responsif saat foto beresolusi tinggi dikodekan, dan pratinjau berdampingan memungkinkan Anda melihat kompromi sebelum mengonfirmasi.
  • Remove Background — model AI kecil berformat ONNX (beberapa MB, diunduh sekali dan di-cache) berjalan di browser Anda melalui ONNX Runtime Web, dengan WebAssembly sebagai backend eksekusi. Eksekusi pertama mengunduh model; setiap eksekusi berikutnya bersifat lokal dan instan.

4. Anda mengunduh hasilnya

Bitmap keluaran dikodekan ke dalam Blob, dibungkus dalam object URL, dan ditawarkan ke dialog simpan file standar browser Anda. Di mana didukung, kami menggunakan File System Access API sehingga Anda dapat memilih folder tujuan secara langsung. File muncul di disk Anda; tidak ada yang melewati server.

Cara memverifikasi sendiri

Klaim “tidak ada unggahan” dapat diperiksa dalam dua menit. Pilih metode yang Anda sukai:

Metode 1 — Pantau tab Network

  1. Buka RoundCut di tab baru.
  2. Buka DevTools (F12 atau klik kanan → Inspect) dan beralih ke tab Network.
  3. Klik tombol “hapus” di tab Network untuk memulai dari awal.
  4. Gunakan alat apa pun: unggah gambar, edit, unduh hasilnya.
  5. Lihat log Network. Anda akan melihat permintaan untuk HTML, CSS, JS, font, dan (pada penggunaan pertama alat yang lebih berat) modul WebAssembly yang relevan. Anda tidak akan melihat permintaan apa pun yang berisi byte gambar Anda.

Kolom “Initiator” memberi tahu Anda skrip mana yang memicu setiap permintaan, dan kolom “Type” memberi tahu Anda apa yang dikirim. Filter dengan “Fetch/XHR” untuk fokus pada permintaan data; Anda akan melihat semuanya kecil, semuanya ke asal statis, dan tidak ada yang berisi file Anda.

Metode 2 — Gunakan alat secara offline

  1. Muat halaman alat RoundCut mana pun. Gunakan sekali untuk memastikan modul WebAssembly yang relevan telah di-cache.
  2. Buka DevTools, buka tab Network, dan centang kotak Offline (atau matikan saja Wi-Fi Anda).
  3. Muat ulang halaman. Halaman masih termuat karena browser meng-cache aset statis.
  4. Gunakan alat lagi, dari awal hingga akhir. Alat masih berfungsi.

Jika alat bekerja secara offline, menurut definisi alat tersebut tidak menghubungi server selama operasi. Ini adalah bukti terkuat yang mungkin — pekerjaan terjadi di mesin Anda karena tidak ada mesin lain yang dapat dijangkau.

Apa yang kami lihat

Untuk memperjelas apa yang dikumpulkan: ketika Anda memuat halaman, penyedia analitik kami (Cloudflare Web Analytics) mencatat bahwa beberapa browser memuat URL tersebut dari beberapa negara. Tidak ada cookie, tidak ada pengenal persisten, tidak ada yang terkait dengan seseorang.

Untuk alat yang mengunduh modul WebAssembly pada penggunaan pertama (codec jSquash, model ONNX penghapus latar belakang), penyedia hosting kami melihat bahwa seseorang mengambil modul tersebut — sama seperti melihat mereka mengambil file CSS. Modul itu sendiri tidak mengandung informasi apa pun tentang gambar Anda.

Inventaris data lengkap ada di kebijakan privasi kami.

Tumpukan teknologi

Bagi yang penasaran, inilah yang menjadi fondasi RoundCut:

  • Astro — generator situs statis. Setiap halaman dikirim sebagai HTML biasa dengan “islands” JavaScript yang ditingkatkan secara progresif hanya di mana alat interaktif berada.
  • CSS vanilla dengan properti kustom — tanpa Tailwind, tanpa CSS-in-JS. Seluruh sistem desain adalah satu file tokens.css.
  • jSquash — binding WebAssembly ke MozJPEG, libwebp, libavif, dan Oxipng untuk pengkodean gambar.
  • Cropper.js — lapisan interaksi persegi panjang potong untuk alat pemotongan.
  • ONNX Runtime Web — menjalankan model penghapus latar belakang di browser Anda melalui WebAssembly.
  • Cloudflare Pages — menghosting build statis, menyajikannya dari edge, dan menyediakan DNS serta perlindungan DDoS.
  • Cloudflare Web Analytics — hitungan tampilan halaman agregat, tanpa cookie.

Dukungan browser

Semua alat berfungsi di versi saat ini dan sebelumnya dari Chrome, Firefox, Safari, dan Edge — desktop dan mobile. Situs ini menggunakan peningkatan progresif: di mana browser mendukung API yang lebih baru (misalnya showSaveFilePicker, OffscreenCanvas), kami menggunakannya; di mana tidak, kami menggunakan padanan yang lebih lama. Tidak ada tembok “browser Anda tidak didukung”.

Satu-satunya persyaratan yang wajib adalah JavaScript. Dengan JavaScript dinonaktifkan, alat-alat tidak dapat berjalan — tidak ada fallback sisi server karena tidak ada server yang melakukan pekerjaan pengolahan gambar.

Pertanyaan

Ada yang belum kami bahas? Email kami di support@araluma.com. Pertanyaan teknis sangat disambut.