將圖片裁切為圓形的做法,是以一個完美的圓形遮罩覆蓋原始影像,再將結果匯出為透明 PNG 檔案。/image/circle-crop/ 的「圓形裁切」工具會從原始影像中最大的中央正方形建立該遮罩,然後將圓形以外的所有像素填滿為完全透明。輸出結果會保留原始影像的像素尺寸,這在圓形需要被列印、上傳為頭像,或以特定大小置於其他設計之上時特別重要。
人們通常基於以下幾種原因之一而想要圓形裁切:社群個人資料照片、留言串中的乾淨頭像、圓形 logo 容器,或是登陸頁面上的造型元素。所有這些用途都有相同的基本需求,也就是一個圓形 PNG,且圓形區域以外的所有內容皆為透明。若在影像編輯器中手動操作,代表著要選取橢、反選、刪除,並在啟用透明度的情況下匯出,而且步驟會因應用程式而異。專用工具則省去了這些繁瑣的步驟,每次都能產生一致的結果。
本指南所介紹的工作流程適用於任何現代桌面瀏覽器,並接受最大 25 MiB 的 JPG、PNG 與 WebP 檔案。不會上傳任何內容到伺服器,如果影像屬於個人照片、設計草稿,或任何不應離開裝置的內容,這點值得留意。輸出永遠是透明 PNG,這是唯一一種在所有現代平台(包括瀏覽器、社群網路與設計軟體)上都支援 alpha 通道的常見影像格式。如果您正在處理螢幕截圖或平面圖形,且需要在其他地方使用透明度,則可使用像是 為圖片添加邊框 或 圓角化圖片 這類工具,將同樣的手法延伸應用於邊緣較柔和的矩形設計。

形裁切對您的影像做了什麼
「圓形裁切」會取用影像中最大的中央正方形,繪製一個填滿該正方形的完美圓形,並將形以外的所有像素轉為完全透明。底層正方形的角落像素(否則在矩形中會顯示為三角形,或顯示為邊界正方形)會變成不可見。可見的結果是一個與原始圖片較短邊等寬、水平和垂直皆置中的圓形。
由於圓形是由正方形建立,因此圓形最大可能的直徑永遠等於原始影像的較短邊。若您的影像是 1600 x 900 像素,圓形直即為 900 像素,並置中於 1600 x 900 的畫布中。若影像已為正方形,形則會觸及四個邊緣。若您需要不同的取景方式,例如讓圓形偏離中心或略過原始構圖的某個部分,則應先使用通用的 圖片裁切器 工具來重新調整正方形位置,再對結果執行圓形裁切。
輸出永遠是帶有 alpha 通道的 PNG。這點很重要,因為 JPG 完全不支援透明度,而 WebP 僅在部分檢視器中支援。PNG 的 alpha 通道在瀏覽器、設計工具與作業系統中皆獲得普遍支援,因此無論輸入格式為何,「圓形裁切」皆將其標準化為 PNG。
檔案輸入、尺寸限制與輸出
| 項目 | 「圓形裁切」接受的內容 |
|---|---|
| 輸入格式 | JPG、PNG、WebP |
| 最大檔案大小 | 25 MiB |
| 輸出格式 | 具備完整 alpha 透明度的 PNG |
| 輸出尺寸 | 原始來源尺寸(不會縮小) |
| 圓形位置 | 影像的幾何中心 |
| 圓形直徑 | 等於來源影像的較短邊 |
| 處理位置 | 本地瀏覽器,不上傳 |
由於輸出保留了原始解析度,一張 4000 x 3000 像素的照片可產生直徑為 3000 像素的形。這對於高密度顯示器以及小尺寸列印皆綽綽有餘。若檔案大於您分享所需的大小,您可以在不離開覽器的情況下,接著使用 圖片壓縮器 或 圖片縮放器 將其縮減至更合理的大小。
如何將圖片裁切為形
- 在瀏覽器中開啟 圓形裁切 工具,並點擊上傳區域以從您的裝置選擇 JPG、PNG 或 WebP 檔案。該工具接受最大 25 MiB 的檔案,並在影像載入後確認來源的像素寬度與高度。
- 確認顯示的尺寸,以便準確得知圓形的大小。圓形的直徑將等於兩個數字中較小的那個,而畫布則會保留原始完整大小,這有助於維持其餘設計版面的穩定。
- 選擇執行圓形裁切的選項。「圓形裁切」會自動取用原始影像中最大的中央正方形,將其遮罩為完美圓形,並將圓形以外的所有像素設為完全透明。由於目標是在原始畫面內最大化圓形,因此並無滑桿或半徑控制選項。
- 檢視預覽結果(其本身即為透明 PNG)。檢查主體是否有任何部分被圓形裁切掉。臉部、logo 與置中物體通常在結果中顯示良好;偏離中心的主體可能需要先使用 圖片裁切器 重新取景,再重新裁切為圓形。
- 將透明 PNG 下載至您的裝置。下載的檔案符合原始影像的像素尺寸,可直接用於個人資料圖片上傳工具、設計版面或文件頁面。
選擇合適的來源影像以獲得乾淨的結果
圓形裁切效果是否理想,最大的因素在於影像載入時置中的內容是什麼。「圓形裁切」使用幾何中心,而非偵測到的臉部或智慧焦點,因此任何重要的元素皆應已位於畫面中央附近。對於人像照而言,這代表應將眼睛大致置於中央略偏上的位置,以避免下巴與額頭被圓形的下緣與上緣裁切掉。
若主體明顯偏離中心,最簡單的修正方法是先使用 圖片裁切器 將主體移至中央,再對結果執行圓形裁切。依照此順序操作可避免雙重裁切,並使圓形盡可能放大。如何從影像中裁切出一個圓形 中的相關指南以更詳細的方式說明了相同的概念,並包含取景技巧。
背景同樣重要。當圓形具備透明度時,若原始背景能夠乾淨地消失,或在目標位置被單色或圖樣取代,效果最佳。若您的影像擁有您希望去除的繁雜背景,由於圓形本身會隱藏角落,通常僅靠圓形就已足夠。對於會以顏色填滿背景的社群平台方形頭像而言,透明的角落本來也不會顯示。
圓形裁切 vs. 圓角 vs. 完整裁切
| 工具 | 產生的形狀 | 最適用於 |
|---|---|---|
| 圓形裁切 | 角落完全透明的完整圓形 | 頭像、個人資料照片、圓形 logo、圓形徽章 |
| 圓角化圖片 | 具備圓角的矩形 | 產品卡片、部落格縮圖、圖片網格、裱框相片 |
| 圖片裁切器 | 任意長寬比的純矩形 | 主視覺圖、部落格封面、用於列印的精確取景 |
差異之所以重要,是因為這三個工具解決的是不同的版面問題。「圓形裁切」會以完全透明取代四個角落,因此可見區域自始至終皆為真正的圓形。「角化圖片」保留完整的矩形尺寸,僅將圓角平滑化,這代表影像仍會填滿其容器而不留任何空白。「圖片裁切器」則保留所選區域的每一個像素,這是當不應隱藏任何內容時所需要的結果。選錯工具通常會在矩形版面中留下透明縫隙,或在應為圓形處出現可見的方形角落。
圓形裁切後的常見任務
一旦您擁有圓形透明 PNG,它通常會融入其他工作流程中。頭像與個人資料照片是最常見的用途,且大多數平台皆可直接接受 PNG。若平台堅持使用 JPG,您可以透過 PNG 轉 JPG 進行轉換,但這將以單色背景(通常為白色)取代透明度。
設計師經常將圓形裁切與其他修飾手法搭配使用。在圓形下方加入陰影可使其在平面背景上更為突出,這可以透過 為圖片添加陰影 輕鬆完成。圓形周圍的細邊框可以透過匯出稍大的透明畫布並填滿環狀區域來建立,或者對圓形 PNG 使用 為圖片添加邊框,並接受邊框會落在可見圓形而非不可見角落上的情況。
對於文件、應用程式商店或網站導覽而言,圓形圖示通常需要與方形 favicon 並列。Favicon 產生器 可從相同的來源產生配對的方形 PNG favicon,而 如何從任何影像產生 favicon 指南則逐步說明該流程。如何從任何本機影像產生 favicon 指南涵蓋了當來源影像已位於磁碟上時的相同工作流程。
何時該選擇其他形狀
當目標位置需要圓形遮罩時——例如大頭貼、圓形標誌或圓形徽章——圓形裁切就是最合適的選擇。如果你的目標是圓角較柔和的圓角矩形,而不是真正的圓形,那麼 圓角圖片 工具會保留矩形尺寸,僅將四角修圓成你所選擇的百分比半徑。這種做法更適合用在商品卡片、部落格縮圖,以及需要讓圓角整齊落在矩形容器內的圖片格點中。
如果需要完全不修邊的矩形裁切,通用版的 圖片裁切器 可讓你自由選擇任何長寬比或像素尺寸。如果你還想縮減檔案大小以便放到網站上,可以在裁切後接著使用 圖片壓縮器;若需要特定格式,則可使用像 Webp 轉檔器 或 JPG 轉 PNG 這類轉檔工具。在 何時該使用 JPG 或 PNG,以及如何在兩者之間轉檔 中的轉檔指南,能幫助你判斷哪種輸出格式適合目標用途。
如果你正在處理品牌素材,希望圓形落在特定的背景色上而非保持透明,可以使用 為 PNG 加入背景,在透明圓形下方鋪上純色背景,而不會改變像素尺寸。這樣的組合能讓你得到一張完全填滿的圓形圖片,可直接用於簡報、海報,或任何不支援透明背景的用途。
隱私與瀏覽器相容性說明
由於圓形裁切完全在瀏覽器中透過 canvas 與標準影像解碼執行,原始圖片會直接從你的裝置讀取,絕不會上傳到遠端伺服器。當照片涉及隱私、設計尚未公開,或公司政策禁止將內部圖片上傳到第三方服務時,這種全程在本地處理的流程特別有用。這也表示只要該頁面至少載入過一次,工具就能在離線狀態下繼續運作——在飛機上或網路連線不穩的環境下非常好用。
瀏覽器支援範圍相當廣泛。任何近期桌面版的 Chrome、Edge、Firefox、Safari 或 Opera 都能正確處理 PNG 的透明 Alpha 輸出與透明預覽。在較舊的瀏覽器上(尤其是那些早於現代 canvas 匯出行為的版本),預覽可能會顯示棋盤格,但下載下來的檔案仍然是有效的透明 PNG。如果你在手機或平板上使用,想要觸控操作更友善的相同流程,這個工具在行動瀏覽器上的運作方式完全相同,僅是上傳控制項的視覺略有不同。
圓形裁切結果不如預期的除錯方式
如果結果把主體裁掉了,通常是因為主體在原圖中沒有置中。請先用 圖片裁切器 開啟原圖,重新構圖讓主體置中,再執行一次圓形裁切。如果圓形看起來太小,代表原圖的寬與高差距過大,直徑受到較短邊的限制;這時先將原圖裁切為更接近正方形,之後得到的圓形就會明顯大得多。
如果下載的 PNG 與預覽看起來不同,請先確認目標用途是否支援 PNG 透明。有些聊天軟體和較舊的網頁表單會把透明 PNG 攤平成實心背景,導致原本被裁掉的四角又以實心方形重新出現。這時可在上傳前先用 PNG 轉 JPG 轉成 JPG 來避開這個問題——但前提是該用途能接受非透明的版本。
如果檔案因為太大而被拒絕,代表原圖超過 25 MiB。請先用 圖片縮放器 調整大小,或用 圖片壓縮器 進行壓縮,再用處理過的較小檔案執行圓形裁切。輸出的 PNG 將會是新的尺寸,這對圓形預計要放置的目標用途來說通常已經足夠。