Cara RoundCut berfungsi

Butiran teknikal tentang apa yang setiap alat lakukan, tempat ia berjalan, dan bagaimana anda boleh mengesahkannya sendiri.

Jawapan ringkasnya

RoundCut menggunakan satu seni bina hibrid: kebanyakan alat berjalan sepenuhnya dalam pelayar anda tanpa sebarang muat naik, dan segelintir menghalakan satu permintaan rangkaian tunggal melalui infrastruktur kami sendiri apabila pelayar tidak mampu menandingi kualitinya, sentiasa dengan satu sandaran sisi pelanggan yang tidak kelihatan. Kami memberitahu anda laluan mana yang anda gunakan, dalam setiap alat dan pada halaman ini.

Jadual di bawah bersifat mewakili, bukan menyeluruh (alat baharu dilancarkan secara berkala). Ia menunjukkan satu contoh bagi setiap jenis laluan:

Alat contohDi mana kerja berlaku
Circle Crop (khusus pelayar)100 peratus dalam pelayar anda, Canvas API. Tiada muat naik, berfungsi luar talian.
Pratonton pemampatan (khusus pelayar)100 peratus dalam pelayar anda, canvas.toBlob. Tiada muat naik. Peluncur kekal serta-merta.
Muat turun akhir pemampatan (menyentuh pelayan)Satu pulang-pergi ke perkhidmatan kami di api.roundcut.com.br (Fastify dengan sharp dengan libvips pada satu VPS di Jerman), dengan satu sandaran pelayar.
Buang Latar Belakang (menyentuh pelayan)Satu pulang-pergi ke satu Cloudflare Worker yang menjalankan BiRefNet pada GPU pinggir Cloudflare, dengan satu sandaran WebAssembly dalam pelayar anda apabila awan tidak dapat dicapai.

Memotong, mengubah saiz, penukaran format (kecuali pengekodan AVIF), dan pratonton pemampatan semuanya berjalan sepenuhnya dalam pelayar anda. Pembuangan latar belakang, muat turun pemampatan, memperbesar dengan AI, pengekodan AVIF, dan PDF berbilang imej masing-masing menghalakan satu permintaan dan berundur kepada pelayar apabila awan tidak dapat dicapai.

Anda boleh mengesahkan dakwaan sisi pelanggan dalam kira-kira 30 saat: buka DevTools → Network, kosongkan log, kemudian gunakan satu alat khusus pelayar seperti Circle Crop atau peluncur pratonton pemampatan, anda akan melihat sifar permintaan yang membawa bait imej anda meninggalkan halaman. Bagi alat yang menyentuh pelayan anda akan melihat tepat satu muat naik setiap operasi, ke titik akhir yang dinamakan.

Mengapa hibrid

Kebanyakan alat imej dalam talian berada di satu hujung melampau: muat-naik-segala-galanya-ke-pelayan (anda menunggu pulang-pergi dan pengendali menyimpan fail anda), atau semua-dalam-pelayar (anda membayar dengan kualiti dan kelajuan pada langkah pengekodan atau AI). Kedua-dua hujung melampau itu tidak menang di mana-mana.

Kami memilih sisi pelanggan di tempat pelayar sudah pun cemerlang, elemen <canvas> mengendalikan pemotongan, putaran, pengubahan saiz, dan pengekodan pratonton berhilang dalam JPG atau WebP, dan sisi pelayan di tempat pelayar masih kalah secara boleh diukur:

  • Pemampatan imej, pada muat turun akhir. sharp dengan libvips 8.17 sisi pelayan menghasilkan fail yang lebih kecil 10 hingga 15 peratus bait demi bait berbanding pengekod pelayar pada kualiti visual yang sama, dan memberi akses kepada penalaan kelajuan/kroma AVIF serta keluaran JPEG XL yang tidak didedahkan pelayar. Peluncur dan pratonton masih berjalan dalam pelayar anda supaya pengulangan kekal serta-merta, hanya ketukan “Muat turun” yang melalui perkhidmatan kami.
  • Pembuangan latar belakang AI dan memperbesar AI, pada laluan lalai. Model (BiRefNet untuk segmentasi, resolusi super untuk pembesaran) memerlukan satu GPU sebenar untuk selesai dalam beberapa saat. Sandaran dalam pelayar berfungsi tetapi lebih lambat dan menghasilkan keputusan yang lebih kasar ketara pada rambut, bulu, dan tepi halus.
  • Pengekodan AVIF, pada penukaran. Pengekod AVIF dalam pelayar lambat pada sesetengah peranti, jadi keluaran AVIF menghalakan satu permintaan ke Worker pemampatan, dengan satu pengekodan pelayar pada bebenang utama sebagai sandaran.

Kos yang kami terima kerana berada di sisi pelayan pada laluan-laluan itu ialah satu pulang-pergi setiap operasi. Kos yang kami elakkan dengan kekal sisi pelanggan di tempat lain ialah yuran pulang-pergi pada bahagian aliran kerja yang paling kerap diulang.

Saluran paip, langkah demi langkah

1. Anda memilih satu fail

Melalui pemilih fail, seret-dan-lepas, atau tampal, pelayar menyerahkan satu objek File kepada JavaScript. JavaScript membaca bait menggunakan FileReader atau Blob.arrayBuffer(). Tiada satu titik pun dalam langkah ini fail dihantar melalui rangkaian, tidak kira alat mana yang anda gunakan.

2. Pelayar menyahkod imej

Pelayar moden menyahkod JPG, PNG, WebP, GIF, dan AVIF secara asli. Kami menggunakan createImageBitmap() untuk menukar bait mentah menjadi satu bitmap yang boleh diolah GPU, di luar bebenang utama. Untuk HEIC pada pelayar yang tidak menyahkodnya secara asli, kami berundur kepada satu penyahkod WebAssembly yang berjalan secara setempat dalam pelayar anda.

3. Alat melakukan tugasnya, di sinilah laluan bercabang

  • Alat khusus pelayar (memotong, mengubah saiz, penukaran format kepada PNG/JPEG/WebP, pratonton pemampatan). Satu transformasi piksel Canvas 2D atau satu kodek WebAssembly mengekod semula bitmap secara setempat. Hasilnya sedia tanpa sebarang muat naik. Cropper.js mengendalikan bingkai potongan interaktif untuk alat memotong, dan canvas.toBlob mengendalikan pengekodan semula pratonton. Sepenuhnya dalam pelayar anda.
  • Pemampatan, muat turun. Apabila anda mengetuk “Muat turun”, imej dihantar sekali ke api.roundcut.com.br (satu perkhidmatan Fastify yang berjalan pada satu VPS di Jerman dikendalikan oleh Hostinger, Node 24 dengan sharp 0.34 dengan libvips 8.17, pustaka C yang sama yang digunakan Squoosh pada laluan pelayannya). Ia dikodkan semula dengan parameter sama yang anda tetapkan dalam pratonton, dan bait dialirkan kembali ke pelayar anda. Perkhidmatan menyimpan satu cache yang terasing mengikut penyewa dan beralamat kandungan (satu cincang bait input dengan parameter) dengan had 500 MB supaya memuat turun semula imej sama dengan tetapan sama memainkan semula bait yang dicache, cache tidak diindeks mengikut anda, IP, atau nama fail. Jika perkhidmatan tidak dapat dicapai, alat berundur kepada blob pratonton dalam pelayar.
  • Buang Latar Belakang, laluan awan lalai. Imej dimuat naik sekali ke satu Cloudflare Worker, dipentaskan dalam satu baldi R2 peribadi, diproses oleh transformasi cf.image.segment Cloudflare yang menjalankan model BiRefNet pada GPU pinggir Cloudflare, dan potongan dialirkan kembali. Objek R2 yang dipentaskan dipadam dalam masa satu jam oleh satu peraturan kitaran hayat R2, tidak kira hasilnya. Satu foto biasa selesai dalam 1 hingga 3 saat. Had setiap IP setiap hari dan had muat naik 5 MB memastikan peringkat percuma kekal mampan.
  • Alat lain yang disokong awan (memperbesar AI, pengekodan AVIF, PDF berbilang imej) mengikut bentuk yang sama: satu permintaan ke infrastruktur dinamakan (satu API imej awan untuk resolusi super, Worker pemampatan untuk pengekodan AVIF, perkhidmatan VPS kami untuk PDF berbilang imej), hasil dialirkan kembali, dan satu sandaran dalam pelayar yang telus jika permintaan itu gagal.
  • Sandaran WebAssembly. Jika laluan awan berkaitan tidak dapat dicapai (rangkaian anda terputus, anda di belakang tembok api yang ketat, kuota harian penuh, atau fail melebihi had awan), alat bertukar secara telus kepada satu model atau kodek setempat yang berjalan dalam pelayar anda, contohnya model pembuangan latar belakang ISNet melalui ONNX Runtime Web dengan WebAssembly. Larian pertama memuat turun model dan lebih lambat, larian seterusnya lebih pantas. Tiada muat naik pada laluan sandaran ini, anda boleh mengesahkannya dalam DevTools.

4. Anda memuat turun hasilnya

Bitmap keluaran dikodkan menjadi satu Blob, dibungkus dalam satu object URL, dan ditawarkan kepada dialog simpan fail standard pelayar anda. Fail muncul pada cakera anda.

Bagaimana mengesahkannya sendiri

Pilih yang mana anda suka:

Kaedah 1. Perhatikan tab Network

  1. Buka RoundCut dalam satu tab segar dan buka DevTools → Network.
  2. Gunakan satu alat khusus pelayar, Circle Crop atau peluncur pratonton pemampatan. Anda akan melihat permintaan untuk HTML/CSS/JS/fon sahaja, ditambah modul WebAssembly berkaitan pada penggunaan pertama. Tiada permintaan akan membawa bait imej anda.
  3. Kini gunakan satu alat menyentuh pelayan, Pemampatan → Muat turun atau Buang Latar Belakang. Anda akan melihat tepat satu POST membawa imej anda, dan satu respons kembali dengan hasilnya. Tuding mana-mana permintaan untuk melihat saiz dan pemasaan.

Lajur “Initiator” memberitahu anda skrip mana yang mencetuskan setiap permintaan, dan lajur “Type” memberitahu anda apa yang dihantar. Kami tidak menyembunyikan kedua-duanya.

Kaedah 2. Gunakan alat secara luar talian

  1. Muatkan mana-mana halaman alat RoundCut. Gunakan Buang Latar Belakang sekali pada imej kecil supaya model ISNet dalam pelayar dicache.
  2. Buka DevTools → Network → tandakan Offline (atau matikan Wi-Fi).
  3. Muat semula halaman, aset statik telah dicache, jadi ia masih dimuatkan.
  4. Cuba alat-alat:
    • Alat khusus pelayar (Circle Crop, ubah saiz, pratonton pemampatan) terus berfungsi, ia tidak pernah memerlukan rangkaian.
    • Muat turun Pemampatan berundur kepada blob pratonton dalam pelayar (pengekodan kurang cekap sedikit, tetapi berfungsi).
    • Buang Latar Belakang berundur kepada model WebAssembly ISNet dan berfungsi tanpa sebarang permintaan keluar.

Jika alat berfungsi luar talian (yang disokong awan merosot sedikit, yang khusus pelayar serupa), maka mengikut takrif tiada pelayan melihat imej anda.

Apa yang kami lihat, dan apa yang tidak

Pada laluan sisi pelanggan, kami tidak melihat apa-apa tentang imej anda. Tiada permintaan untuk dilihat, tiada cache untuk menyimpannya, tiada baris log untuk di-grep.

Pada laluan sisi pelayan:

  • Perkhidmatan pemampatan dan PDF melihat bait imej sepanjang tempoh pengekodan (biasanya beberapa ratus milisaat), menyimpan satu entri cache beralamat kandungan untuk tempoh TTL cache, dan itu sahaja. Cache tidak diindeks mengikut pengguna, IP, nama fail, atau sebarang pengecam yang boleh kami gunakan untuk mencari imej “anda”. Kami tidak merekod kandungan imej. Perkhidmatan pengekodan dikongsi merentas dua penyewa sama yang dilayani v1 sebelum peralihan, dengan CORS setiap penyewa, had kadar, dan URL kanonik yang ditandatangani HMAC.
  • Buang Latar Belakang dan laluan AI lain melihat imej sepanjang tempoh muat naik pementasan dan panggilan model (biasanya beberapa saat), selepas itu salinan yang dipentaskan dipadam oleh satu peraturan kitaran hayat R2. Model BiRefNet berjalan di dalam infrastruktur Cloudflare sendiri, bukan pada satu API luaran bergaya remove.bg, fal.ai, atau Replicate.

Pada setiap laluan, penyedia analitik kami (Cloudflare Web Analytics) merekod data paparan halaman agregat. URL, negara, keluarga pelayar, Core Web Vitals. Tiada kuki, tiada pengecam berterusan, tiada apa-apa yang terikat kepada seseorang.

Untuk alat yang memuat turun satu modul WebAssembly pada penggunaan pertama (penyahkod HEIC, model ISNet ONNX), penyedia pengehosan kami melihat bahawa seseorang mengambil modul itu, sama seperti ia melihat mereka mengambil fail CSS. Modul itu sendiri tidak mengandungi maklumat tentang imej anda.

Inventori data penuh ada dalam dasar privasi kami.

Tindanan teknologi

Untuk yang ingin tahu:

  • Astro, penjana tapak statik. Setiap halaman dilancarkan sebagai HTML biasa dengan “pulau” JavaScript yang dipertingkat secara beransur hanya di tempat alat interaktif berada.
  • CSS tulen dengan sifat tersuai, tiada Tailwind, tiada CSS-in-JS. Keseluruhan sistem reka bentuk ialah satu fail tokens.css tunggal.
  • canvas.toBlob / <canvas>. Pengekodan JPEG, PNG, WebP, AVIF (yang disokong pelayar) dalam alat khusus pelayar, dan semua kerja memotong dan mengubah saiz.
  • Cropper.js, lapisan interaksi segi empat potongan.
  • ONNX Runtime Web, menjalankan sandaran WebAssembly ISNet untuk Buang Latar Belakang.
  • Cloudflare Pages, mengehos binaan statik, menyajikannya dari pinggir.
  • Cloudflare Workers dengan R2 dengan cf.image.segment (BiRefNet), saluran paip Buang Latar Belakang lalai.
  • Fastify dengan sharp 0.34 dengan libvips 8.17 pada Node 24, perkhidmatan pemampatan dan PDF di api.roundcut.com.br, pada satu VPS Hostinger di Jerman.
  • Cloudflare Web Analytics, kiraan paparan halaman agregat tanpa kuki.

Sokongan pelayar

Setiap alat berfungsi pada versi semasa dan versi sebelumnya bagi Chrome, Firefox, Safari, dan Edge, desktop dan mudah alih. Tapak ini menggunakan peningkatan beransur: di tempat pelayar menyokong satu API yang lebih baharu (cth. showSaveFilePicker, OffscreenCanvas), kami menggunakannya, di tempat ia tidak menyokong, kami berundur kepada setara yang lebih lama. Tiada tembok “pelayar anda tidak disokong”.

Satu-satunya keperluan tegas ialah JavaScript (untuk mana-mana alat) dan satu sambungan rangkaian (hanya apabila menggunakan satu alat yang disokong awan pada laluan lalainya, alat khusus pelayar berjalan sepenuhnya luar talian selepas muatan halaman pertama).

Soalan

Ada apa-apa yang kami tidak liputi? E-mel support@roundcut.app. Soalan teknikal dialu-alukan.