若要將圖片裁剪成形，請從原始照片中擷取最大且置中的正方形，將該正方形裁切至圓形路，然後將結果匯出為 PNG，使圓形以外的區域變成透明。不必安裝軟體就能做到這一點的最簡潔方式是使用 Circle Crop，它會直接在您的瀏覽器中讀取 JPG、PNG 或 WebP 檔案，透過圓形裁切遮罩繪製置中的正方形，並回傳一個角落透明的完整解析度 PNG。整個流程都在您的電腦上執行：檔案透過瀏覽器的 Canvas API 解碼，圓形遮罩於本地套用，編碼器產生下載到您機器的 PNG。不會有任何資料被傳送到伺服器，因此原始照片和產生的頭像絕不會離開您的裝置。由於圓形以外的每個像素都被賦予 alpha 透明度而非實心填色，輸出結果在任何背景上都能乾淨呈現——白色頁面、深色主題、彩色主視覺區塊以及帶紋理的版面皆可適用，不會有方形外框透出的問題。正是這個單一特性，讓裁切成圓形的 PNG 在個人檔案照片、團隊目錄、市集賣家頭像、聯絡人卡片，以及需要快速設計模型但又不適合方形縮圖的場景中特別實用。

how do i crop an image in a circle
how do i crop an image in a circle

裁剪幾何的運作原理

中心裁剪是一個精確的幾何運算，在您按下按鈕之前先了解確切的輸出尺寸，可以省去來回重新編輯的麻煩。Circle Crop 不會調整大小或放大；輸出 PNG 的寬度和高度皆等於原始影像較短的一邊。這意味著正方形輸入會維持原尺寸，橫向影像會把寬度縮短至與高度相同，直向影像則會把高度縮短至與寬度相同。圓形內部使用的來源矩形永遠是原始畫面中可容納的最大且置中的正方形。

下表顯示四種常見的方向情況。來源矩形座標為零起始，並假設原始影像未經旋轉。「輸出」欄位即為下載 PNG 的實際尺寸。

來源尺寸置中的來源矩形輸出 PNG 尺寸
1200×800 (向)x: 200 至 1000，y: 0 至 800800×800
800×1200 (直向)x: 0 至 800，y: 200 至 1000800×800
1500×1500 (正方形)x: 0 至 1500，y: 0 至 15001500×1500
1920×1080 (螢幕向)x: 420 至 1500，y: 0 至 10801080×1080

快速驗算方式：將較長邊減去較短邊，再把差值除以二，即可得到較長軸上的偏移量。以 1200×800 為例，偏移量為 (1200 − 800) ÷ 2 = 200 像素（每邊），中間留下寬度 800 像素的區塊，那就是最終會落入圓形內的來源矩形。以 1920×1080 為例，偏移量為 (1920 − 1080) ÷ 2 = 420 像素（每邊），留下寬度 1080 像素的置中正方形。當較長軸為高度而非寬度時，同樣的規則也適用於垂直方向，這也是直向來源會以相同方式裁剪下來的原因。

三個步驟將圖片裁剪成形

整個工作流程刻意保持精簡：選擇檔案、點擊一次、然後下載。沒有需要費力調整的滑桿、縮放控制項或重新定位把手，這也讓您能在發布前輕驗證結果。

  1. 選擇一個不超過 25 MiB 的 JPG、PNG 或 WebP 檔案。瀏覽器會在嘗試解碼之前先驗證 MIME 類型和壓縮後的檔案大小，而顯示的來源尺寸可確認工具實際讀取到的內容。
  2. 選擇 Create circle crop。渲染器會以原始像素大小擷取最大且置中的正方形，使用 Canvas API 的 clip 基本操作將繪圖限制在圓形路徑內，並使用 drawImage 將置中的來源矩形放置到透明畫布上對應的目標矩形中。整個過程沒有任何悄悄進行的縮放步。
  3. 檢視透明的 PNG 預覽，然後下載結果。預覽僅受限於頁面版面配置；您儲存的檔案會是符合上述幾何表格所列尺寸的原始大小輸出畫布。

由於可見的預與下載的檔案共用相同的裁剪計畫和渲染器（與隔離測試所用者相同），因此您所見即所存。預覽是在發布頭像之前，確認重要細節不會觸及圓形邊界的最簡便方式。

輸出的內容會包含什麼、不會包含什麼

由於圓形外部必須具備透明度，因此每個結果都會編碼為 PNG。JPEG 無法表示 alpha 通道，所以匯出 JPEG 要嘛會把角落填滿白色，要嘛會填滿黑色，反而失去圓形裁剪的意義。一個值得了解的副作用：下載的 PNG 在磁碟上可能比原始的 JPEG 或 WebP 來得大。這是正常現象。PNG 採用無失真壓縮，因此在照片內容上無法達到 JPEG 的檔案大小優勢，但它保留了讓圓形裁剪真正實用的透明度。

新編碼的 PNG 同樣不保證會保留來源檔案中的 EXIF 中繼資料、相機方向標記、色彩描述檔、動畫影格或內嵌文字欄位。若您因為歸檔用途而需要原始相機中繼資料，請將來源檔案與裁剪後的 PNG 一起保留，而不是把輸出檔當作替代品。對於大多數頭像和設計用途——裁剪後的 PNG 就是最終成品——這樣的取捨是可以接受的。

圓形邊界本身可能包含因瀏覽器反鋸齒處理而產生的部分透明邊緣像素。這是特性而非缺陷：這些邊緣像素在一般顯示尺寸下能產生更平滑的視覺邊緣，避免在頁面背景上出現鋸齒狀的階梯輪廓。

支援的輸入與硬性限制

Circle Crop 依設計支援三種輸入格式：JPEG、PNG 和 WebP。SVG 和 GIF 遭到排除，是因為本工具鎖定一般靜態點陣圖，既不保留向量行為也不保留動畫影格。若您的來源屬於其他格式，請先轉檔——例如使用 Webp Converter 或 JPG to PNG 工具。

在解碼影像之前，適用以下三項數值限制：

  • 壓縮後的檔案大小：25 MiB，亦即正好 26,214,400 位元組。
  • 解碼後的像素總面積：40 百萬像素。
  • 解碼後任一邊的像素長度：20,000 像素。

後兩項限制很重要，因為瀏覽器是依據解碼後的尺寸，而非壓縮後的檔案大小，來配置 canvas 記憶體。一個解碼後為 16,000 乘以 12,000 點陣的小型 JPEG，落在 40 百萬像素上限之內；但一個大小相近、解碼後卻是寬度 25,000 像素 canvas 的 JPEG，即使磁碟上的檔案遠低於 25 MiB，也會被拒絕。不支援、空檔案、超大、超出預算、無法讀取、canvas、編碼與下載網址等錯誤都會被明確回報，且任何過時的輸出都會被清除。若出現解碼或編碼錯誤，請從可信的編輯器重新匯出來源檔案後再試一次，而不是重試同一個檔案。

若主體不在中央，請先準備來源檔

中心裁剪僅在主體已接近畫面中央時才有效。本工具沒有定位控制項，也沒有自動主體偵測功能，因此若臉部或產品靠近邊緣，圓形就會將其裁掉。兩個簡單的準備步驟可解決大多數情況：

  • 先在完整的影像編輯器中重新擺放主體。在匯出前將重要內容移入中央正方形區域，讓圓形周圍有足夠留白。
  • 使用 Image Cropper 將來源裁剪成主體已填滿較短邊的尺寸。一張人物站在左側三分之一的 1200×800 照片，經過矩形裁剪將人物置中後，會成為更好的圓形裁剪來源。

在發布之前，也值得分別在淺色與深色背景上檢視透明的 PNG。在淺色頁面背景上的深色絲，或在深色主題上的淺色衣領，都可能會暴露出單色預覽所無法察覺的細微反鋸問題。同一份預覽也能用來確認重要細節——眉毛、耳朵、手部、產品標籤——不會觸及圓形邊界，避免在小尺寸顯示時被裁掉。最後，請保留原始檔案。Circle Crop 並不會修改您的來源檔，但裁剪後的 PNG 是衍生成品，並不能取代原始檔。

其他可與 Circle Crop 搭配使用的瀏器工具

Circle Crop 解決的是一個特定的問題，因此有幾個相鄰的工具能補足它不那麼合適的情境。這些工具同樣都在本地端執行，您可以任意順序串接使用，全程無需上傳任何檔案。

  • 當主體在套用圓形遮罩前需要自訂矩形區域時，請使用 Image Cropper。它能讓您將裁剪框拖曳至精確的矩形，當置中的正方形對您要的取景而言太緊或太鬆時特別有用。
  • 當來源照片拍攝方向歪斜，需要在圓形裁剪前先行校正時，請先使用 Image Rotator。在圓形裁剪後再旋轉是沒有意義的，因為圓形會跟著畫布一起旋轉。
  • 當最終頭像需要特定像素尺寸——例如目錄縮圖的 256×256——請將 Circle Crop 與 Image Resizer 串接使用。Circle Crop 會產出原始大小的正方形，Image Resizer 再將其縮放至精確的像素目標，全程無需額外的上傳步驟。

依此順序使用，這三個工具即可涵蓋典型的頭像工作流程：裁切取景、修正方向、裁剪成圓形，最後縮放至精確的像素目標——整個過程來源檔都不會離開您的覽器。

若您正在權衡各種方案，Create Perfect Circle Images for Spore Avatars in Your Browser 對此有詳細介紹。

若您正在權衡各種方案，Circle Crop Alternative That Runs in Your Browser 對此有詳細介紹。