RoundCut 如何運作

技術細節說明工具完全在您的瀏覽器中執行——以及您如何自行驗證這一點。

簡短說明

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 使用 FileReaderBlob.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 標籤

  1. 在新分頁中開啟 RoundCut。
  2. 開啟 DevTools(F12 或右鍵 → 檢查),切換到 Network 標籤。
  3. 點擊 Network 標籤中的「清除」按鈕,重新開始記錄。
  4. 使用任意工具:上傳圖片、編輯、下載結果。
  5. 查看 Network 紀錄。您會看到 HTML、CSS、JS、字型以及(首次使用較重工具時)相關 WebAssembly 模組的請求。您不會看到任何包含您圖片位元組資料的請求。

「Initiator」欄顯示觸發每個請求的腳本,「Type」欄顯示傳送的內容。 用「Fetch/XHR」篩選以聚焦資料請求;您會發現它們都很小,都指向靜態來源,沒有一個包含您的檔案。

方法 2 — 離線使用工具

  1. 載入任意 RoundCut 工具頁面,使用一次以確保相關 WebAssembly 模組已快取。
  2. 開啟 DevTools,進入 Network 標籤,勾選 離線 核取方塊(或直接關閉 Wi-Fi)。
  3. 重新載入頁面。它仍然能載入,因為瀏覽器已快取靜態資源。
  4. 從頭到尾再次使用工具。它仍然正常運作。

如果工具在離線狀態下運作,那麼從定義上說,它在操作過程中沒有聯繫任何伺服器。 這是最有力的證明——處理發生在您的機器上,因為沒有其他機器可達。

我們能看到什麼

明確說明收集的內容:當您載入頁面時,我們的分析提供商 (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 時(如 showSaveFilePickerOffscreenCanvas),我們使用它; 不支援時則退而使用舊的等效方案。沒有「您的瀏覽器不受支援」的封鎖頁面。

唯一的硬性要求是 JavaScript。停用 JavaScript 後工具無法執行——因為沒有伺服器端備援, 而處理圖片的伺服器本就不存在。

問題反饋

還有我們未涵蓋的內容?請發送電子郵件至 support@araluma.com。歡迎技術問題。