簡短說明
RoundCut 使用兩個瀏覽器原生 API 在您的瀏覽器中執行所有工具: HTML5 Canvas API 用於像素級操作, WebAssembly 用於較繁重的任務——圖片格式的編解碼和 AI 推論。 沒有任何檔案被上傳,沒有任何內容在我們的伺服器上處理,因為我們沒有接觸您檔案的伺服器。
您可以在大約 30 秒內自行驗證:開啟瀏覽器的 DevTools,切換到 Network 標籤,清除紀錄,然後使用任意工具。 您看到的所有網路請求都只是靜態網站資源——HTML、CSS、JavaScript、字型以及 WebAssembly 模組。 您的圖片從不會離開頁面。
為什麼選擇用戶端處理
大多數線上圖片工具的運作方式恰恰相反:您上傳,伺服器處理,您下載結果。 這種模式有幾個眾所周知的缺點——您的檔案存放在別人的機器上,您需要等待兩次往返, 而且業者要按 CPU 秒付費,這就是為什麼這些服務往往會加入帳號體系、浮水印或付費方案。
多年來,瀏覽器已經能夠原生完成這些工作的大部分。<canvas> 元素處理裁切、旋轉、縮放和重新編碼;
WebAssembly 讓我們能以接近原生的速度執行 Squoosh 使用的相同 C/Rust 函式庫——MozJPEG、libwebp、libavif 和 Oxipng。
到 2026 年重建版推出時,瀏覽器實際上已趕上桌面圖片編輯工具。已沒有任何理由再依賴伺服器。
結果是一個具備三個相互強化特性的技術堆疊:隱私 (您的檔案永遠不會離開您的裝置)、速度(無需上傳、無需排隊、 無需伺服器往返)和成本(無論有多少人使用,每月只需花幾分錢從 CDN 提供靜態資源)。
處理流程詳解
1. 您選擇檔案
當您透過檔案選擇器、拖放或貼上選擇圖片時,瀏覽器會將一個 File 物件傳遞給 JavaScript。
JavaScript 使用 FileReader 或 Blob.arrayBuffer() API 讀取位元組。
在這個步驟中,檔案不會透過網路傳送。
2. 瀏覽器解碼圖片
現代瀏覽器可以原生解碼 JPG、PNG、WebP、GIF、AVIF,以及(在 Safari 和最新版 Chromium 中)HEIC。
我們使用 createImageBitmap() 在主執行緒之外將原始位元組轉換為 GPU 可以處理的點陣圖。
對於不支援 HEIC 原生解碼的瀏覽器,我們退而使用在瀏覽器本地執行的 WebAssembly 解碼器。
3. 工具執行處理
接下來發生的事取決於具體工具。RoundCut 目前提供三種:
- Circle Crop — 使用圓形裁切路徑的 Canvas 2D 像素變換。點陣圖以選定的旋轉角度和縮放比例繪製到
<canvas>上,套用圓形裁切後,圓圈內部的內容作為ImageData讀回。互動式裁切框由 Cropper.js 處理。 - Compress — 使用 jSquash WebAssembly 模組(MozJPEG、libwebp、libavif、Oxipng)重新編碼 JPG、PNG、WebP 或 AVIF。這些是 Squoosh 使用的相同上游編解碼器。它們在
Web Worker中執行,確保數百萬像素照片編碼期間介面保持回應,並排預覽讓您在確認前看清品質與檔案大小的取捨。 - Remove Background — 一個小型 ONNX 格式 AI 模型(幾 MB,下載一次後快取)透過 ONNX Runtime Web 在您的瀏覽器中執行,以 WebAssembly 作為執行後端。首次執行時下載模型,之後每次執行都是本地即時處理。
4. 您下載結果
輸出點陣圖被編碼為 Blob,包裝成 object URL,提供給瀏覽器的標準檔案儲存對話框。
在受支援的情況下,我們使用 File System Access API,
讓您可以直接選擇儲存目錄。檔案出現在您的磁碟上,沒有任何內容經過伺服器。
如何自行驗證
「不上傳」的說法可以在兩分鐘內驗證。選擇您偏好的方法:
方法 1 — 觀察 Network 標籤
- 在新分頁中開啟 RoundCut。
- 開啟 DevTools(F12 或右鍵 → 檢查),切換到 Network 標籤。
- 點擊 Network 標籤中的「清除」按鈕,重新開始記錄。
- 使用任意工具:上傳圖片、編輯、下載結果。
- 查看 Network 紀錄。您會看到 HTML、CSS、JS、字型以及(首次使用較重工具時)相關 WebAssembly 模組的請求。您不會看到任何包含您圖片位元組資料的請求。
「Initiator」欄顯示觸發每個請求的腳本,「Type」欄顯示傳送的內容。 用「Fetch/XHR」篩選以聚焦資料請求;您會發現它們都很小,都指向靜態來源,沒有一個包含您的檔案。
方法 2 — 離線使用工具
- 載入任意 RoundCut 工具頁面,使用一次以確保相關 WebAssembly 模組已快取。
- 開啟 DevTools,進入 Network 標籤,勾選 離線 核取方塊(或直接關閉 Wi-Fi)。
- 重新載入頁面。它仍然能載入,因為瀏覽器已快取靜態資源。
- 從頭到尾再次使用工具。它仍然正常運作。
如果工具在離線狀態下運作,那麼從定義上說,它在操作過程中沒有聯繫任何伺服器。 這是最有力的證明——處理發生在您的機器上,因為沒有其他機器可達。
我們能看到什麼
明確說明收集的內容:當您載入頁面時,我們的分析提供商 (Cloudflare Web Analytics) 記錄某個瀏覽器從某個國家載入了該 URL。 沒有 Cookie,沒有持久識別符,沒有與任何人綁定的資訊。
對於首次使用時需要下載 WebAssembly 模組的工具(jSquash 編解碼器、ONNX 背景移除模型), 我們的託管提供商會看到有人取得了該模組——就像看到有人取得 CSS 檔案一樣。 模組本身不包含任何關於您圖片的資訊。
完整的資料清單在我們的隱私權政策中。
技術堆疊
以下是 RoundCut 的建構技術,供感興趣的朋友參考:
- Astro — 靜態網站產生器。每個頁面以純 HTML 發布,僅在有互動工具的地方使用漸進增強的 JavaScript「島嶼」。
- 原生 CSS 與自訂屬性 — 無 Tailwind,無 CSS-in-JS。完整的設計系統只有一個
tokens.css檔案。 - jSquash — MozJPEG、libwebp、libavif 和 Oxipng 的 WebAssembly 綁定,用於圖片編碼。
- Cropper.js — 裁切工具的矩形互動層。
- ONNX Runtime Web — 透過 WebAssembly 在瀏覽器中執行背景移除模型。
- Cloudflare Pages — 託管靜態建構,從邊緣節點提供服務,並提供 DNS 和 DDoS 防護。
- Cloudflare Web Analytics — 無 Cookie 的聚合頁面瀏覽量統計。
瀏覽器支援
所有工具在 Chrome、Firefox、Safari 和 Edge 的當前版本和上一個版本中均可執行——桌面端和行動端皆支援。
網站採用漸進增強方式:在瀏覽器支援較新 API 時(如 showSaveFilePicker、OffscreenCanvas),我們使用它;
不支援時則退而使用舊的等效方案。沒有「您的瀏覽器不受支援」的封鎖頁面。
唯一的硬性要求是 JavaScript。停用 JavaScript 後工具無法執行——因為沒有伺服器端備援, 而處理圖片的伺服器本就不存在。
問題反饋
還有我們未涵蓋的內容?請發送電子郵件至 support@araluma.com。歡迎技術問題。