圓形裁切是把照片或圖片中最居中的最大正方形轉成完美圓形影像，並讓圓形外的四個角落變成透明的過程。Circle Crop 會在你目前的瀏覽器分頁中完整執行這個轉換：選取的檔案會在本機解碼、輸出畫布以來源圖片較短邊的像素尺寸建立，而最終的檔案是一張完整解析度的 PNG，你可以直接放進大頭貼欄位、團隊通訊錄、市集刊登資料，或任何簡單的版面配置。這個流程刻意避開了容易讓第一次使用的人感到困惑的功能——沒有重新定位的控制把手、沒有縮放滑桿、沒有自動主體偵測，也沒有會默默改變輸出的品質滑桿。沒有任何東西會被上傳、不需要帳號，而且每次執行都能得到一致的結果。這篇新手導覽會說明圓形裁切究竟是什麼、為什麼這個做法對新手特別友善，以及如何用三個簡單的步驟產出你的第一張圓形圖片。
如果你曾經試圖用「在方形上加上圓角」的方式來假裝做出圓形裁切，你早就感受過其中的差異：圓角方形仍然會在你的背景顏色上顯示四個三角形，而真正的圓形裁切則在圓形以外的區域全部都是透明的。這種透明正是整個功能的重點——它能讓圓形頭像乾淨地落在任何背景上，無論是亮色或暗色，都不會在背後出現一塊礙眼的色塊。
圓形裁切實際上做了什麼
圓形裁切以一張矩形的來源影像開始，最終輸出一張正方形的 PNG，裡面只有圓形區域是可見的。只要看一次就能理解它的幾何原理：想像在矩形內畫出能放下的最大正方形，並且讓它與上下左右四邊等距對齊。然後想像把這個正方形裁剪到只剩裡面的圓盤區域，並把圓形以外的每個像素都變成透明（看穿背景的）像素。
Circle Crop 完全按照這個步驟執行。它會以原始像素尺寸從來源圖片取出居中的正方形，把圓形以外的所有部分遮罩掉，然後輸出一張 PNG。PNG 在這裡是正確的格式，因為它才是真正支援透明背景的點陣圖格式——相較之下，JPEG 完全沒有透明像素的概念，會把四個角落填成白色或其他純色。JPEG「圓形裁切」輸出的角落區域，正是醜陋大頭貼最常見的原因，這也是為什麼值得了解透明 PNG 這種做法的另一個理由。
為什麼這個做法對新手特別友善
大多數號稱對新手友善的工具，實際上都內建了一整套工具箱。Circle Crop 走了相反的路：它刻意省略了重新定位、拖曳、縮放與主體偵測功能。這聽起來像是限制，但對新手來說，少一點按鈕反而是一種特色。每次執行都會產生可以預期的結果，你可以透過計算像素來與來源比對，而且無論你按一次或十次，結果都完全相同。
有幾個具體的設計讓第一次做圓形裁切的人會覺得很友善：
- 不會上傳任何東西。瀏覽器透過暫時的本機物件 URL 讀取你的檔案、進行解碼、繪製到畫布上、再匯出 PNG——全部都在你開啟的這個頁面內完成。你的影像位元組從未送到任何伺服器。
- 不用註冊、不用帳號、不用電子郵件。你只要打開工具、選擇檔案、下載結果。完全沒有需要建立或記住的東西。
- 不會悄悄調整尺寸。輸出畫布以來源圖片較短邊相同的像素尺寸建立，因此一張 1200×800 的照片會產生 800×800 的結果，而不是縮成縮圖。
- 只有一個按鈕。整個工作被簡化成「選檔案、按下建立、下載」。沒有預覽畫布要拖、沒有把手要拉，也沒有會讓你卡在錯誤設定的長寬比控制項。
我們影像工具分類中的 Circle Crop 頁面完整保留了這樣的體驗：把檔案丟進去、按一下、把檔案拿出來。
如何用三個步驟完成圓形裁切
如果你以前從沒做過這件事，下面的三步驟流程可以讓你直接得到一張可用的圓形 PNG，完全不需要反覆嘗試。
- 選擇一個 25 MiB 以下的 JPG、PNG 或 WebP 檔案。打開 Circle Crop，點選檔案選擇器，挑選你的照片或圖片。圖片解碼後，頁面會立刻顯示來源尺寸，這是在你做任何無法復原的動作之前，快速確認有沒有開錯檔案的好方法。
- 選擇Create circle crop。這個單一動作就會執行整個流程。工具會根據來源尺寸計算出最大的居中正方形、建立相同大小的輸出畫布、在畫布上裁切出一個圓形，然後使用文件記載的 Canvas clip path 將來源正方形繪製進去。
- 檢查透明的 PNG 預覽，然後下載檔案。當預覽出現時，沿著邊緣放大檢視或滑鼠停留，確認主體確實落在圓形內部。如果沒問題，下載 PNG，並把原始檔案一併保留，方便日後編輯。
如果你想看另一種稍微不同措辭的平行說明，我們的指南 cropping a picture to a circle in your browser 會從另一個角度涵蓋同樣的三個步驟，很適合作為第二輪閱讀。
輸出尺寸說明：用單純的數字講清楚
因為 Circle Crop 不會調整尺寸，背後的數學非常簡單，每次都能事先預測。取來源矩形的長邊邊長——這個數字會同時成為 PNG 的寬度與高度。頁面上的可見預覽只是縮小以符合版面配置；你實際下載的檔案永遠來自原始尺寸的輸出畫布，因此儲存的 PNG 是完整解析度的版本。
| 來源尺寸 | 輸出尺寸 | 使用的居中正方形 |
|---|---|---|
| 1200 × 800（橫向） | 800 × 800 | 來源上 x = 200 到 x = 1000 |
| 800 × 1200（直向） | 800 × 800 | 來源上 y = 200 到 y = 1000 |
| 1000 × 1000（正方形） | 1000 × 1000 | 整張圖片 |
預覽與下載使用的是同一套畫布繪製流程，這就是為什麼兩者永遠不會不同步——你看到什麼，存下來就是什麼。
第一次就拿到最佳結果的訣竅
因為 Circle Crop 無法移動裁切範圍，作為新手最值得養成的習慣，就是選一張好的來源圖片。兩條簡單的原則就能涵蓋大多數情況。
讓主體保持在中央附近。裁切範圍是以數學方式置中的，所以原本就位於矩形中央的臉孔，會出現在圓形的中央。如果你的主體緊貼著某一邊，圓形就會直接切過它，這時候沒有任何滑桿能救你——正確的做法是先在別的工具中裁切或重新定位來源圖片，再回來繼續。
在亮色與暗色背景下測試圓形 PNG。角落雖然是透明的，但圓形邊緣本身的像素可能因為瀏覽器對曲線做平滑處理（這稱為反鋸齒）而呈現部分透明。在白色頁面上，這些柔邊像素可能會看起來像淡淡的光暈；在深色頁面上，則可能顯得稍微半透明。在發佈之前，同時在兩種背景下查看結果，是最便宜也最有效的品質檢查。
還有兩個小細值得記住：把原始檔案和新 PNG 一起保留，需要時可以重新構圖；另外要記得新檔案是全新的 PNG 匯出，所以 EXIF 中繼資料、相機描述、顏色設定檔，以及任何動畫都不會一起帶過來。這對重新匯出而言是正常現象——輸出就只有那張圓形圖片，不會夾帶其他東西。
輸入、限制，以及超過限制時會發生什麼
在第一次使用之前，先了解 Circle Crop 接受什麼、會客氣地拒絕什麼，會很有幫助。下表的限制來自於工具公開記錄的行為，這些限制的存在，是因為畫布記憶體取決於解碼後的像素數量，而不是壓縮後的檔案大小。
| 輸入 / 限制 | 可接受的值 | 為什麼重要 |
|---|---|---|
| 檔案格式 | JPEG (JPG)、PNG、WebP | 僅接受靜態點陣圖。SVG 與 GIF 會刻意排除。 |
| 壓縮後的檔案大小 | 最高 25 MiB（26,214,400 位元組） | 超過這個大小，瀏覽器會在解碼之前拒絕該檔案。 |
| 解碼後每邊像素數 | 最高 20,000 | 現代瀏覽器畫布記憶體的一般上限。 |
| 解碼後像素總數 | 最高 4,000 萬像素 | 用來攔截壓縮後仍小於 25 MiB 的大型全景圖。 |
| 輸出格式 | 僅 PNG | 圓形外必須是透明的，JPEG 無法承載透明度。 |
如果檔案不支援、空檔、尺寸過大、超過像素預算、無法讀取，或在解碼過程中損壞，工具會顯示清楚的訊息，而不會胡亂猜測。先前選取所留下的舊輸出也會一併清除，因此你絕不會看到與目前載入檔案不符的預覽。
除了圓形之外——你接下來可能會需要的工具
有時候圓形裁切只是整個工作流程中的一個步驟。如果你的起始影像需要的不只是置中，還有另外三個本機工具可以處理常見的後續作業，而且一樣完全不需要上傳。
- 如果你的主體偏離中央，而且你需要自訂的矩形裁切，請在執行圓形步驟之前先使用 Image Cropper，讓主體落在居中的正方形範圍內。
- 如果你需要把圓形 PNG 變成特定像素尺寸——例如聊天應用程式圖示用的 256 × 256——請在圓形步驟之後使用 Image Resizer，精準調整到目標大小。
- 如果來源圖片方向歪斜或上下顛倒，請先用 Image Rotator 修正方向；旋轉過的來源會決定最終結果是直向還是橫向。
搭配 Circle Crop，這三個工具涵蓋了新手最常遇到的路徑：清理來源、置中主體、裁出圓形，再依目的端需要的尺寸進行縮放。
如果你正在比較不同做法，How to Crop an Image in macOS Preview (or Your Browser) 有詳細說明。