簡短說明
Araluma 採用混合式架構:多數工具完全在你的瀏覽器內執行、零上傳, 少數工具則在瀏覽器無法比擬其品質時,把單一網路請求送往我們自己的 基礎設施,並且總是搭配一個隱形的用戶端退回方案。我們會在每個工具 以及本頁告訴你目前走的是哪條路徑。
下方表格是代表性的,並非詳盡列舉(這套工具持續成長)。 它各列出一種路徑類型的範例:
| 範例工具 | 工作發生的位置 |
|---|---|
| Circle Crop(瀏覽器專屬) | 100% 在你的瀏覽器內,使用 Canvas API。無需上傳,可離線運作。 |
| Compress 預覽(瀏覽器專屬) | 100% 在你的瀏覽器內,使用 canvas.toBlob。無需上傳。滑桿保持即時。 |
| Compress 下載(接觸伺服器) | 與我們位於 api.araluma.com 的服務(架設於德國 VPS 的 sharp 加 libvips)進行一次往返,並有瀏覽器退回方案。 |
| Remove Background(接觸伺服器) | 與一個在邊緣 GPU 上執行 BiRefNet 的 Cloudflare Worker 進行一次往返,並在你的瀏覽器內有 WebAssembly 退回方案。 |
裁切、縮放、PDF 以及格式轉換工具(AVIF 輸出路徑除外)都位於瀏覽器 專屬的這一側。壓縮下載、移除背景、AI 放大,以及 AVIF 輸出的轉換則 位於接觸伺服器的這一側,每一個都搭配一個本機退回方案。
你可以在大約 30 秒內驗證瀏覽器專屬的說明:開啟 DevTools,前往 Network 面板,清除記錄,然後使用任一個瀏覽器專屬的工具。你會看到 沒有任何帶有你圖片位元組的請求離開頁面。至於接觸伺服器的工具, 你每次操作會看到恰好一筆上傳,目的地即上述具名端點。
為什麼選擇混合式
大多數線上圖片工具落在某個極端:把所有東西上傳到伺服器(你得等待 往返,而業者保留你的檔案),或是全程在瀏覽器內(你在編碼與 AI 步驟 上付出品質與速度的代價)。沒有一個極端能在所有地方都勝出。
我們在瀏覽器已經出色的地方選擇用戶端。<canvas> 元素能處理裁切、
旋轉、縮放,以及 JPG 或 WebP 的失真預覽編碼,而現代瀏覽器原生解碼
每一種常見格式。我們只在瀏覽器仍可量測地落後的少數步驟選擇伺服器端:
- 壓縮,在最終下載時。伺服器端的
sharp加libvips在相同視覺品質下逐位元組產生比瀏覽器編碼器小 10 到 15% 的檔案,並開放瀏覽器未提供的 AVIF 速度與色度調校。滑桿與預覽仍在你的瀏覽器內執行,讓每次調整保持即時。只有「下載」這一下才會經過我們的服務。 - AI 移除背景,在預設路徑上。Cloudflare 圖片分割所執行的 BiRefNet 模型(與 remove.bg 相同的架構)需要一個真實的 GPU 才能在一兩秒內完成。瀏覽器內的退回方案(透過 ONNX Runtime 加 WebAssembly 的 ISNet)可以運作,但耗時長得多,且在頭髮、毛皮與細小邊緣上產生明顯較粗糙的去背結果。
- AI 放大,在預設路徑上。雲端超解析度能還原瀏覽器端重採樣無法還原的細節,並在服務無法連線時搭配瀏覽器退回方案。
我們為了在那些路徑上採用伺服器端所接受的代價,是每次操作一次往返。 我們在其他所有地方堅持用戶端所避免的,正是同一筆代價,發生在工作 流程中迭代最快的部分。
處理流程,逐步拆解
1. 你選擇一個檔案
透過檔案選擇器、拖放或貼上,瀏覽器把一個 File 物件交給 JavaScript。
JavaScript 使用 FileReader 或 Blob.arrayBuffer() 讀取位元組。
在這個步驟中,無論你使用哪個工具,檔案都不會透過網路送出。
2. 瀏覽器解碼圖片
現代瀏覽器原生解碼 JPG、PNG、WebP、GIF 與 AVIF。我們使用
createImageBitmap() 在主執行緒之外,把原始位元組轉成 GPU 能處理
的點陣圖。對於不原生解碼 HEIC 的瀏覽器,我們退回到一個在你的瀏覽器
本地執行的 WebAssembly 解碼器。
3. 工具執行其任務,路徑在此分歧
- 瀏覽器專屬工具(裁切、縮放、壓縮預覽與滑桿、PDF 組合,以及多數格式轉換)。這些以 Canvas 像素變換與
canvas.toBlob重新編碼的形式,就在你的機器上執行。互動式裁切框使用 Cropper.js。沒有任何東西離開頁面。 - 壓縮下載。 當你點擊「下載」時,圖片會一次送往
api.araluma.com(一個架設於德國 Hostinger VPS 的 Fastify 服務,Node 加上sharp與libvips,與 Squoosh 在其伺服器路徑上使用的相同 C 函式庫)。它依你在預覽中設定的參數重新編碼,位元組再串流回來。該服務維護一個租戶隔離、以內容定址的快取(輸入位元組加參數的雜湊),因此以相同設定重新下載同一張圖片時會回放快取的位元組。那個快取不以你、你的 IP 或檔名建立索引。若服務無法連線,工具會退回瀏覽器內的預覽 blob。 - 移除背景,預設雲端路徑。 圖片一次上傳到一個 Cloudflare Worker,暫存於一個私有 R2 儲存桶,由 Cloudflare 圖片分割在邊緣 GPU 上執行 BiRefNet 模型處理,去背結果再串流回來。暫存的物件無論結果如何,都會在一小時內由一條 R2 生命週期規則刪除。一張一般照片會在一兩秒內完成。每日的每 IP 與上傳大小上限讓免費層維持可持續。
- 移除背景,WebAssembly 退回方案。 若 Worker 無法連線(你的網路中斷、嚴格的防火牆擋住它、每日配額已滿,或檔案超過雲端上限),工具會悄悄切換到透過 ONNX Runtime Web 與 WebAssembly 在本地執行的 ISNet 模型。首次執行會下載模型且耗時較長,之後的執行較快。這條路徑無需上傳,可在 DevTools 中驗證。
- AI 放大。 預設路徑把圖片一次送往一個雲端超解析度服務,並把放大後的結果串流回來,在服務無法連線時搭配一個瀏覽器端的退回方案。
4. 你下載結果
輸出的點陣圖被編碼成一個 Blob,包裝進一個 object URL,再交給你的
瀏覽器標準的檔案儲存對話框。檔案落到你的磁碟上。
如何自行驗證
任選你偏好的方法:
方法 1. 觀察 Network 分頁
- 在一個全新分頁中開啟 Araluma,並開啟 DevTools,然後到 Network 面板。
- 使用一個瀏覽器專屬工具,例如 Circle Crop 或 Compress 預覽滑桿。你只會看到 HTML、CSS、JS 與字型的請求,以及首次使用時相關的 WebAssembly 模組。不會有任何請求帶有你圖片的位元組。
- 現在使用一個接觸伺服器的工具,例如 Compress 下載或 Remove Background。你會看到恰好一筆
POST把你的圖片帶往那個具名端點,以及一筆帶著結果回來的回應。把游標停在任一請求上即可看到它的大小與時間。
「Initiator」欄告訴你哪個腳本觸發了每個請求,而「Type」欄告訴你 送出了什麼。這兩者我們都不隱藏。
方法 2. 離線使用工具
- 載入任一個 Araluma 工具頁面。對一張小圖片執行一次 Remove Background,讓瀏覽器內的 ISNet 模型完成快取。
- 開啟 DevTools,前往 Network,勾選 Offline(或關閉 Wi-Fi)。
- 重新載入頁面。靜態資源已快取,所以它仍會載入。
- 試用各工具:
- 瀏覽器專屬工具持續運作。它們從不需要網路。
- Compress 下載退回到瀏覽器內的預覽 blob(編碼效率略低,但仍可用)。
- Remove Background退回到 ISNet WebAssembly 模型,無需任何對外請求即可運作。
如果那些工具在離線狀態下都能運作(有些效果略降,瀏覽器專屬的則完全 相同),那麼依定義就沒有任何伺服器看過你的圖片。
我們看得到什麼,以及看不到什麼
在瀏覽器專屬的路徑上,我們對你的圖片一無所悉。沒有可看的請求、 沒有可儲存它的快取、沒有可搜尋的日誌行。
在接觸伺服器的路徑上:
- Compress 下載在編碼期間(通常是數百毫秒)看到圖片位元組,在其 TTL 期間保留一筆以內容定址的快取項目,僅此而已。那個快取不以使用者、IP、檔名,或任何我們能用來找出「你的」圖片的識別符建立索引。我們不記錄圖片內容。這個編碼服務由 v1 在切換前所服務的相同租戶共享,具備各租戶各自的 CORS、速率限制,以及以 HMAC 簽署的正規 URL。
- Remove Background在暫存上傳與分割呼叫期間(通常是一兩秒)看到圖片,之後暫存副本由 R2 生命週期規則刪除。我們絕不把你的位元組交給任何第三方模型供應商。BiRefNet 模型在 Cloudflare 自己的基礎設施內執行,而非在某個外部的 remove.bg、fal.ai 或 Replicate 式的 API 上。
- AI 放大在超解析度呼叫期間看到圖片,回傳結果,且不保留任何與你相關的東西。
在每一條路徑上,我們的分析服務商(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,為 Remove Background 執行 ISNet WebAssembly 退回方案。
- Cloudflare 代管這個靜態建構並從邊緣提供服務,也運行支撐預設 Remove Background 路徑的 Workers、R2 與圖片分割管線(BiRefNet)。
- Node 上的 Fastify 搭配
sharp與libvips,位於api.araluma.com的壓縮下載服務,架設於德國的 Hostinger VPS。 - Cloudflare Web Analytics,彙總、無 cookie 的頁面瀏覽計數。
瀏覽器支援
每個工具都能在 Chrome、Firefox、Safari 與 Edge 的當前與前一個版本上
運作,桌機與行動端皆然。本站採用漸進增強:當瀏覽器支援較新的 API
(例如 showSaveFilePicker 或 OffscreenCanvas),我們就使用它。
不支援時,我們退回到較舊的等效方案。沒有「你的瀏覽器不受支援」的牆。
唯一的硬性需求是 JavaScript(任何工具都需要)以及網路連線(只在使用 一個接觸伺服器的路徑時才需要,瀏覽器專屬的工具在首次載入頁面後可 完全離線運作)。
問題
有什麼我們沒提到的嗎?請寄信至 support@araluma.com。歡迎技術問題。