RoundCut 如何運作

簡短說明

RoundCut 採用一種混合式架構：大多數工具完全在你的瀏覽器裡執行，零上傳。少數 幾個工具則在瀏覽器無法達到同等品質時，把單一一次的網路請求送往我們自己的基礎設施， 而且永遠搭配一個隱形的用戶端備援。我們會告訴你你正走在哪一條路徑上，在每個工具裡， 也在這個頁面上。

下面的表格是代表性的，並非完整列舉（新工具會定期推出）。它各舉一個例子來說明 每一種路徑：

範例工具	工作發生的地方
Circle Crop（純瀏覽器）	百分之百在你的瀏覽器裡，用 Canvas API。不上傳，可離線使用。
壓縮預覽（純瀏覽器）	百分之百在你的瀏覽器裡，用 canvas.toBlob。不上傳。滑桿保持即時。
壓縮最終下載（接觸伺服器）	與我們位於 api.roundcut.com.br 的服務（Fastify 加 sharp 加 libvips，跑在一台位於德國的 VPS 上）往返一次，並有瀏覽器備援。
去背（接觸伺服器）	與一個在 Cloudflare 邊緣 GPU 上執行 BiRefNet 的 Cloudflare Worker 往返一次，當雲端無法連線時在你的瀏覽器裡有 WebAssembly 備援。

裁切、調整尺寸、格式轉換（AVIF 編碼除外）以及壓縮預覽全都完全在你的瀏覽器裡執行。 去背、壓縮下載、AI 放大、AVIF 編碼以及多張圖片的 PDF 則各自會送出一次請求，並在 雲端無法連線時退回到瀏覽器。

你可以在大約 30 秒內驗證這些用戶端的說法：打開 DevTools 的 Network，清空紀錄， 然後使用一個純瀏覽器的工具，像是 Circle Crop 或壓縮預覽滑桿，你會看到沒有任何帶著 你圖片位元組的請求離開這個頁面。至於接觸伺服器的工具，你每次操作會看到恰好一次上傳， 送往具名的端點。

為什麼採用混合式

大多數線上圖片工具落在某一個極端：把所有東西都上傳到伺服器（你得等待往返，而營運者 會保留你的檔案），或者全部在瀏覽器裡（你在編碼或 AI 的步驟上要付出品質與速度的代價）。 這兩個極端都不是處處都贏。

我們在瀏覽器已經很出色的地方選擇了用戶端，<canvas> 元素能處理裁切、旋轉、調整 尺寸，以及 JPG 或 WebP 的失真預覽編碼，而在瀏覽器仍可量測地落後的地方選擇了伺服器端：

• 圖片壓縮，用於最終下載。伺服器端的 sharp 加 libvips 8.17 在相同的視覺品質下，能產出比瀏覽器編碼器逐位元組小 10 到 15% 的檔案，並提供瀏覽器沒有開放的 AVIF 速度與色度調校以及 JPEG XL 輸出。滑桿與預覽仍跑在你的瀏覽器裡，所以調整保持即時，只有「下載」這一下會經過我們的服務。
• AI 去背與 AI 放大，用於預設路徑。這些模型（用於分割的 BiRefNet、用於放大的超解析度）需要一張真正的 GPU 才能在幾秒內完成。瀏覽器內的備援雖然能運作，但較慢，而且在頭髮、毛皮與細邊上會產出明顯較粗糙的結果。
• AVIF 編碼，用於轉換。瀏覽器內的 AVIF 編碼器在某些裝置上很慢，所以 AVIF 輸出會把一次請求送往壓縮 Worker，並以主執行緒的瀏覽器編碼作為備援。

我們在那些路徑上選擇走伺服器端所接受的代價，是每次操作往返一次。我們在其他地方保持 用戶端所避開的，是在工作流程裡迭代最快的那些部分上的往返開銷。

流程，一步一步

1. 你選取一個檔案

透過檔案選擇器、拖放或貼上，瀏覽器把一個 File 物件交給 JavaScript。JavaScript 用 FileReader 或 Blob.arrayBuffer() 讀取位元組。在這個步驟裡，檔案在任何時候 都不會透過網路送出，無論你正在使用哪一個工具。

2. 瀏覽器解碼圖片

現代瀏覽器原生解碼 JPG、PNG、WebP、GIF 與 AVIF。我們用 createImageBitmap() 把 原始位元組轉成 GPU 能處理的點陣圖，並在主執行緒之外進行。對於不原生解碼 HEIC 的 瀏覽器，我們會退回到一個在你的瀏覽器裡本機執行的 WebAssembly 解碼器。

3. 工具開始做它的事，這就是路徑分岔的地方

• 純瀏覽器工具（裁切、調整尺寸、轉成 PNG/JPEG/WebP 的格式轉換、壓縮預覽）。一個 Canvas 2D 的像素轉換或一個 WebAssembly 編解碼器在本機重新編碼這張點陣圖。結果不經任何上傳就完成了。Cropper.js 為裁切工具處理互動式的裁切框，canvas.toBlob 處理預覽的重新編碼。完全在你的瀏覽器裡。
• 壓縮，下載。 當你按下「下載」時，圖片會被送往 api.roundcut.com.br 一次（一個跑在由 Hostinger 營運、位於德國的 VPS 上的 Fastify 服務，Node 24 加 sharp 0.34 加 libvips 8.17，與 Squoosh 在其伺服器路徑上使用的相同 C 函式庫）。它會用你在預覽裡設定的相同參數重新編碼，然後把位元組串流回你的瀏覽器。這個服務保有一個租戶隔離、以內容定址的快取（輸入位元組加參數的雜湊），上限為 500 MB，所以用相同設定重新下載同一張圖片時會重播快取的位元組，這個快取不以你、IP 或檔名來建索引。如果服務無法連線，工具會退回到瀏覽器內的預覽 blob。
• 去背，預設雲端路徑。 圖片會被上傳到一個 Cloudflare Worker 一次，暫存在一個私有的 R2 儲存桶裡，由 Cloudflare 的 cf.image.segment 轉換處理（它在 Cloudflare 的邊緣 GPU 上執行 BiRefNet 模型），然後把去背成果串流回來。暫存的 R2 物件會由一條 R2 生命週期規則在一小時內刪除，無論結果如何。一張典型的照片在 1 到 3 秒內完成。每 IP 的每日上限與 5 MB 的上傳上限讓免費方案保持可持續。
• 其他有雲端後盾的工具（AI 放大、AVIF 編碼、多張圖片的 PDF）走相同的形態：一次請求送往具名的基礎設施（用於超解析度的雲端圖片 API、用於 AVIF 編碼的壓縮 Worker、用於多張圖片 PDF 的我們的 VPS 服務），結果串流回來，而那次請求失敗時則有透明的瀏覽器內備援。
• WebAssembly 備援。 如果相關的雲端路徑無法連線（你的網路斷了、你在嚴格的防火牆後面、每日配額已滿，或檔案超過雲端上限），工具會透明地切換到一個在你的瀏覽器裡執行的本機模型或編解碼器，例如透過 ONNX Runtime Web 加 WebAssembly 執行的 ISNet 去背模型。第一次執行會下載模型而且較慢，後續執行則較快。在這些備援路徑上不上傳，你可以在 DevTools 裡驗證。

4. 你下載結果

輸出的點陣圖被編碼成一個 Blob，包進一個 object URL，然後交給你瀏覽器標準的 存檔對話框。檔案出現在你的磁碟上。

你自己如何驗證

挑你偏好的任何一種方法：

方法 1。盯著 Network 分頁看

1. 在一個新分頁裡打開 RoundCut，並打開 DevTools 的 Network。
2. 使用一個純瀏覽器的工具，Circle Crop 或壓縮預覽滑桿。你只會看到 HTML/CSS/JS/字型的請求，外加初次使用時相關的 WebAssembly 模組。沒有任何請求會帶著你的圖片位元組。
3. 現在使用一個接觸伺服器的工具，壓縮的「下載」或去背。你會看到恰好一次帶著你圖片的 POST，以及一次帶著結果回來的回應。把游標停在任何請求上就能看到大小與時間。

「Initiator」欄會告訴你是哪個腳本觸發了每個請求，「Type」欄會告訴你送出了什麼。 這兩者我們都不藏。

方法 2。離線使用這些工具

1. 載入任何一個 RoundCut 工具頁面。在一張小圖上用一次去背，讓瀏覽器內的 ISNet 模型被快取。
2. 打開 DevTools 的 Network，勾選 Offline（或關掉 Wi-Fi）。
3. 重新載入頁面，靜態資源已被快取，所以它仍會載入。
4. 試試這些工具：
   • 純瀏覽器工具（Circle Crop、調整尺寸、壓縮預覽）照常運作，它們從來不需要網路。
   • 壓縮下載退回到瀏覽器內的預覽 blob（編碼效率略低，但能用）。
   • 去背退回到 ISNet 的 WebAssembly 模型，不經任何向外的請求就能運作。

如果這些工具能離線運作（有雲端後盾的略為降級，純瀏覽器的則完全一樣），那麼根據定義 沒有任何伺服器看過你的圖片。

我們看得到什麼，看不到什麼

在用戶端的路徑上，我們對你的圖片一無所知。沒有請求可看、沒有快取可存它、也沒有 日誌行可以 grep。

在伺服器端的路徑上：

• 壓縮與 PDF 服務在編碼期間（通常是幾百毫秒）看得到圖片位元組，保有一個以內容定址的快取項目直到快取 TTL，僅此而已。這個快取不以使用者、IP、檔名或任何我們可以用來找到「你的」圖片的識別碼來建索引。我們不記錄圖片內容。這個編碼服務由 v1 在切換前所服務的相同兩個租戶共用，並有各租戶的 CORS、速率限制與 HMAC 簽章的正規 URL。
• 去背與其他 AI 路徑在暫存上傳與模型呼叫期間（通常是幾秒）看得到圖片，之後暫存的副本會由一條 R2 生命週期規則刪除。BiRefNet 模型在 Cloudflare 自己的基礎設施內執行，而不是在 remove.bg、fal.ai 或 Replicate 那一類的外部 API 上。

在每一條路徑上，我們的分析提供者（Cloudflare Web Analytics） 記錄彙總的頁面瀏覽資料。URL、國家、瀏覽器家族、Core Web Vitals。沒有 cookie、 沒有持久的識別碼、沒有任何綁定到個人的東西。

對於初次使用時會下載一個 WebAssembly 模組的工具（HEIC 解碼器、ISNet ONNX 模型）， 我們的代管供應商會看到有人抓取了那個模組，就跟它看到他們抓取 CSS 檔案的方式一樣。 這個模組本身不含任何關於你圖片的資訊。

完整的資料清單在我們的隱私權政策裡。

技術堆疊

給好奇的人：

• Astro，這個靜態網站產生器。每個頁面都以純 HTML 出貨，只在互動式工具所在之處才有漸進增強的 JavaScript「島嶼」。
• 使用自訂屬性的原生 CSS，沒有 Tailwind，沒有 CSS-in-JS。整個設計系統就是單一一個 tokens.css 檔案。
• canvas.toBlob / <canvas>。純瀏覽器工具裡的 JPEG、PNG、WebP、AVIF（瀏覽器支援的）編碼，以及所有的裁切與調整尺寸工作。
• Cropper.js，裁切矩形的互動層。
• ONNX Runtime Web，執行去背的 ISNet WebAssembly 備援。
• Cloudflare Pages，代管這個靜態建置，從邊緣供應它。
• Cloudflare Workers 加 R2 加 cf.image.segment（BiRefNet），預設的去背流程。
• Fastify 加 sharp 0.34 加 libvips 8.17，跑在 Node 24 上，位於 api.roundcut.com.br 的壓縮與 PDF 服務，跑在一台位於德國的 Hostinger VPS 上。
• Cloudflare Web Analytics，彙總、無 cookie 的頁面瀏覽計數。

瀏覽器支援

每個工具都能在 Chrome、Firefox、Safari 與 Edge 的目前版本與前一版本上運作，桌機與 行動裝置皆然。這個網站使用漸進增強：當一個瀏覽器支援較新的 API（例如 showSaveFilePicker、OffscreenCanvas）時我們就用它，當它不支援時我們就退回到 較舊的對應做法。沒有「你的瀏覽器不受支援」的牆。

唯一的硬性需求是 JavaScript（任何工具都需要）以及一個網路連線（只在以預設路徑使用 有雲端後盾的工具時才需要，純瀏覽器的工具在第一次載入頁面後完全離線運作）。

問題

有什麼我們沒提到的嗎？請寄信至 support@roundcut.app。歡迎技術性的問題。