圓形裁切工具會將一張矩形照片或圖片遮罩成完美的圓形,保留原始影像的中心,並將圓形區域以外的所有部分設為透明。在瀏覽器中完成這項工作最乾淨的方式是使用 圓形裁切 工具,它可以讀取最高 25 MiB 的 JPG、PNG 或 WebP,從原始尺寸建立最大的置中正方形,在原始像素大小套用圓形遮罩,並讓你下載一個完整解析度、可直接用於大頭貼、社群貼文、貼圖或分層設計的透明 PNG。
人們搜尋「如何裁切圓形」的原因很多,但最終目標都一樣:一張邊緣乾淨、背景沒有鋸齒狀白色光暈的完美圓形圖片。攝影師需要個人大頭貼,設計師需要圖示,直播主需要聊天室頭像,行銷人員需要可以疊加文字或顏色背景的產品徽章。技術上的挑戰是真實存在的,因為大多數基本的影像編輯器只能裁切矩形區域,而不是圓形,而且粗糙的圓形會留下灰色邊緣、像素被拉伸,或在 retina 螢幕上看起來模糊的低解析度結果。
為什麼專用的圓形裁切器勝過手動方法
你可以在照片編輯器中選取橢圓、反向選取、刪除外部,然後以帶有透明度的 PNG 匯出,藉此模擬出一個圓形。這個流程可以運作,但你需要經過多個選單,取決於你的編輯器是否支援 alpha 通道,而且通常會降低匯出解析度,因為設計師會將畫布裁切到邊界框。專為此目的打造的工具從設計上就避開了這些陷阱。
圓形裁切 工具會保留原始像素數量。如果你載入一張 2400 乘 2400 的照片,你會得到一張 2400 乘 2400 的透明 PNG,只有內切圓形區域是可見的。這很重要,因為現代平台上的圓形大頭貼(包括 Discord、Slack 和大多數社群網路)都以高像素密度顯示,而縮小會讓邊緣變得模糊。這個工具也在瀏覽器內進行遮罩處理,所以你的影像永遠不會傳送到遠端伺服器,這既保護了私人照片,也免去了等待網路往返的時間。
三步驟完成圓形裁切
整個流程刻意設計得很簡短,讓你可以在不到一分鐘內完成。開啟工具、加入你的檔案、儲存圓形。
- 選擇一張最高 25 MiB 的 JPG、PNG 或 WebP 影像,並確認顯示的原始尺寸。工具會回報原始的寬度與高度,讓你確切知道匯出的圓形中會包含多少像素。
- 選擇 建立圓形裁切 以使用原始像素大小的最大置中正方形。遮罩是根據影像的較短邊計算並在畫布上置中,因此圓形在數學上是完美的,絕對不會稍微偏離軸心。
- 檢視透明 PNG 預�,然後下載結果。預覽會在棋盤格背景上顯示圓形遮罩,讓你可以確認 alpha 通道是乾淨的,下載則會提供一個完整解析度的檔案,你可以直接放入個人檔案、簡報或設計檔案中。
原始像素會發生什麼事
在幕後,工具會解碼你的影像,以寬度和高度中較小的值作為直徑,並建立一個以原始影像為中心的正方形裁切區域。接著套用�形 alpha 遮罩,讓內切圓以外的像素變成完全透明。然後將剩餘的正方形修剪到精確的邊界圓,只保留讓 PNG 本身保持正方形畫布所需的透明像素。最終結果是一個透明檔案,可以乾淨地合成在任何顏色或照片背景上。
下表比較了人們用來製作圓形影像的最常見路徑,以及每種方式與專用瀏覽器工具相比的表現。
| 方法 | 保留的解析度 | 透明度 | 伺服器上傳 | 技能等級 |
|---|---|---|---|---|
| 專用圓形裁切工具 | 完整原始像素 | 真實 alpha PNG | 否 | 初學者 |
| Photoshop 手動遮罩 | 取決於畫布大小 | 真實 alpha | 否 | 中級 |
| Canva 圓形外框 | 僅限預設尺寸 | 通常會攤平為 JPG | 免費方案會 | 初學者 |
| 智慧型手機應用程式 | 經常會調整大小 | 不一定 | 通常會 | 初學者 |
選擇合適的原始影像
要獲得最佳的圓形裁切,請從你手上最高的解析度開始。這個工具不會進行放大,所以原始影像越銳利,圓形就越銳利。在原始矩形中盡量靠近主體裁切也會有幫助,因為這樣最大的置中正方形就能緊密地框住臉部、標誌或物件。如果你的主體位於角落附近,先在基本編輯器中重新置中,或使用 影像裁切器 在進行遮罩之前先將影像調整為正方形。
檔案格式的重要性比你想像的要低。JPG 非常適合照片,因為檔案大小較小;PNG 已經有透明通道,因此圓形邊緣可以與未來的任何圖層自然融合;WebP 同時提供高效率壓縮和 alpha,當你需要一個用於網路的精簡圓形大頭貼時特別有用。如果你需要在裁切之前或之後轉換格式,JPG 轉 PNG 和 WebP 轉檔器 都可以在本地端處理,不會遺失資料。
何時將圓形裁切與其他本地工具搭配使用
圓形影像很少單獨存在。常見的後續工作包括將圓形調整為平台專屬的大頭貼尺寸、壓縮檔案以符合上傳限制,或將其疊加在彩色背景上。如果你需要精確的像素輸出(例如 Discord 伺服器圖示的 512 乘 512),請將此工具與 影像調整大小工具 搭配使用。當透明 PNG 超過網站或應用程式的檔案大小上限時,請使用 影像壓縮器。如果你想先柔化主體後方雜亂的背景,影像模糊工具 可以降低干擾,讓圓形在較小尺寸下也能清晰呈現。
對於建立品牌套件包件的設計師來說,維持分層工作流程會很有幫助:裁切成圓形、以完整解析度儲存一次作為母檔,然後透過調整大小工具匯出各種平台版本。這樣可以維持單一真實來源,避免每次需要新圖示尺寸時重新產生遮罩。如果你需要為鏡像設計翻轉圓形,影像翻轉指南 會逐步說明正確的做法,而不會扭曲 alpha 遮罩。
常見輸出問題
下載的 PNG 一律使用較短邊的直徑,以原始解析度為上限。一張 1600 乘 900 的橫向照片會產生 900 乘 900 的圓形 PNG,其中內切圓的直徑為 900 像素。一張 1080 乘 1080 的正方形則維持 1080 乘 1080。如果你想要較小的直徑,請在之後透過 影像調整大小工具 處理結果。如果你想要用於網路的特定檔案格式,PNG 轉 JPG 工具可以將透明度攤平為單色或白色背景,以便在不允許 alpha 的用途中使用。
有一個值得注意的細節:即使你的來源是沒有透明度的 JPG,匯出的 PNG 一律都會帶有真正的 alpha 通道。工具會在遮罩步驟中合成這個通道,因此檔案下載後就能直接疊加在任何背景顏色或照片上,不會有白色方塊透出來。對於印刷或印刷訂製服務,透明的圓形 PNG 讓設計師可以直接將圖稿放在產品上,不需要手動移除背景。如果想更深入了解何時該保留 PNG、何時該轉成 JPG,JPG vs PNG 指南 會用淺白的語言說明其中的取捨。
隱私與瀏覽器效能
因為你的影像所有位元組都停留在瀏覽器分頁內,所以你可以從敏感素材、客戶 mockup 或尚未公開的產品照片裁切圓形,完全不必擔心雲端副本的問題。此工具使用標準的 HTML5 Canvas API 和 FileReader 介面,兩者都在你的裝置上執行。你可以透過載入頁面後斷開網路來驗證這點;即使沒有網路連線,裁切和下載仍會完成,因為遮罩步驟不需要任何網路呼叫。
唯一的實際限制是檔案大小。25 MiB 的上限涵蓋了從手機快照到高解析度掃描的所有內容。如果你的檔案更大,影像壓縮器 可以在大多數照片內容上看不出明顯品質損失的情況下縮小檔案,之後�形裁切就可以正常進行。對於非常大的透明資產(例如分層的 mockup),先匯出一份攤平的 JPG 副本再進行裁切,通常是最快的做法。
圓形邊緣的疑難排解
如果輸出的圓形看起來模糊,通常是來源解析度的問題。請以更高的尺寸重新匯出原始檔案,或在相機中使用較不積極的 JPG 品質設定。如果邊緣看起來有鋸齒,那幾乎都是目標平台縮放產生的失真;透過 影像調整大小工具 使用平滑�鏡進行縮放可以保持曲線乾淨。如果在不同背景上圓形周圍出現彩色光暈,很可能是檔案在某個步驟被匯出為 JPG 而遺失了 alpha 通道。請從原始來源重新執行遮罩步驟,並確認下載的是 .png 檔案。
對於經常產出圓形素材的設計師來說,一份簡明的參考檢查清單會很有幫助:載入原始檔、確認尺寸、產生圓形、在彩色背景上預覽、下載、調整為目標平台大小、封存母檔。這個簡短的循環可以讓你在大頭貼、應用程式圖示和社群貼文中維持一致的品牌識別,而無需將工作流程鎖定在單一付費編輯器中。
如需更深入的說明,請參閱 如何在瀏覽器中將圖片反相。
如需更深入的說明,請參閱 如何在瀏覽器中將圖片裁切成圓形。