圓形裁切,是把一張矩形圖片,變成一張圓形圖片的過程,做法是讓一個指定圓形以外的每一個像素,完全變成透明。結果會是一個 PNG 檔,而不是 JPG,因為只有 PNG 才能在曲線周圍儲存逐像素的透明度。這個圓形,通常被定義成內接在來源矩形裡、置中的最大正方形,這樣能讓主體保持對稱,也不必去猜要從哪裡「裁切」。舉例來說,一張 1200x800 的橫式照片,會用從 x=200 到 x=1000 的來源區域,產生一張 800x800 的透明 PNG;同樣的規則套用在一張 800x1200 的直式照片上,則會用從 y=200 到 y=1000 置中的垂直區域,產生一張 800x800 的 PNG。一張正方形的來源圖片,會保持它原本的尺寸。因為來源比較短的那一邊,會同時變成輸出結果的寬與高,所以圓形裁切絕不會悄悄調整圖片大小,它只會遮罩圖片。這種可預測、以幾何為優先的行為,正是Circle Crop tool直接在瀏覽器分頁裡執行、不上傳任何東西的做法。
「圓形裁切」實際上代表什麼
在日常用語裡,「圓形裁切」通常代表「把這張矩形照片變成一個圓形大頭貼」。但在幕後,這個操作更加具體:這個工具不會彎曲或扭曲圖片,也不會嘗試在裡面找出一張臉。它單純選出一個幾何區域,把那個區域畫到一個透明畫布上,再把這個畫布裁成一個圓形。圓形裡面的一切,都保留原始像素;圓形外面的一切,都變成透明。使用者看到的結果,是一張圓形圖片,能乾淨地疊在任何背景上,不論是淺色、深色,還是有圖案的,周圍都不會帶著一個方形邊框。
這一點很重要,因為這個詞常被鬆散地使用。有些應用程式,把「圓形裁切」用來指柔化暈影、橢圓形裁切,或帶圓角的方形裁切。真正的圓形裁切,是嚴格的那種版本:一個完美的幾何圓形、硬邊界,外部透明。當你理解這個操作是幾何性的、而不是詮釋性的,其餘的行為——包括尺寸、輸出格式,以及不調整大小的保證——就會順理成章。
完美圓形背後的幾何
要產生一個完美的圓形,瀏覽器會先選出一個正方形。一個圓形,只有在邊長相等的正方形裡才能剛好貼合,所以這個工具,會取內接在來源矩形裡、置中的最大正方形。來源比較短的那一邊,就會變成那個正方形的邊長。對橫式照片來說,這個正方形位在畫面正中間;對直式照片來說,它會橫跨整個寬度,並在垂直方向置中;對已經是正方形的照片來說,則完全不會裁掉任何東西。
接著,這個正方形會被畫到一個同樣大小的輸出畫布上,而在繪製之前,會先套用一個圓形的裁切路徑。用 Canvas API 的說法,這是一個兩步驟的操作:呼叫CanvasRenderingContext2D.clip,把繪製範圍限制在一個圓形區域內,而CanvasRenderingContext2D.drawImage,則把選定的來源矩形,繪製到對應的目標矩形裡。圓形外面的像素永遠不會被畫出來,所以它們會保持透明。這個結果在數學上是可預測的:每次都是同樣的中心、同樣的半徑、同樣的輸出尺寸,這也是為什麼橫式、直式、正方形,與奇數差異輸入的黃金測試,全部都依賴同一套共用的裁切方案。
為什麼輸出結果永遠是 PNG
JPEG 沒辦法儲存透明度。每一個 JPEG 像素,都是不透明的 RGB,沒有 alpha 通道,所以一個 JPEG 版的「圓形裁切」,要不就得用單一顏色填滿四個角落(這在任何其他背景上看起來都不對),要不就得保留一個方形邊框(這樣就失去了裁切的意義)。相對地,PNG 儲存的是真正的 alpha 通道,所以圓形外面的每一個像素,都可以保有一個 0 值,在任何背景上都維持不可見。代價是檔案大小:PNG 使用無損壓縮,所以一張透明圓形的 PNG,即使涵蓋的可視面積比較小,通常還是會比原始的 JPEG 大。這是正常現象,不是一個錯誤,也正是為什麼每一次圓形裁切匯出,都使用 image/png。
值得知道的是,這個輸出結果不會保留哪些東西。從重新建構的畫布匯出 PNG,會保留像素,但會捨棄 EXIF 中繼資料、相機方向標籤、內嵌的色彩設定檔、動畫影格,以及任何私有的文字欄位。可見的圖片不會改變,但如果你後續需要依賴中繼資料,就得另外處理它。
如何在瀏覽器裡對圖片做圓形裁切
- 在你的瀏覽器分頁裡打開 Circle Crop。
- 從你的電腦裡選擇一個 JPG、PNG,或 WebP 檔案。這個工具接受最多 25 MiB(26,214,400 位元組)的壓縮檔案,解碼之後,則接受最多 40 百萬畫素、每一邊上限為 20,000 像素的圖片。
- 確認顯示出來的來源尺寸,這樣你就能精確知道這個工具會用哪一個正方形,以及最後輸出的尺寸會是多少。
- 選取 Create circle crop。這個工具會取原始像素大小下、置中的最大正方形,並在一個透明畫布上,把它裁成一個圓形。
- 分別對照淺色與深色背景,檢視這張透明 PNG 的預覽,確認沒有任何重要的細節碰到那條曲線。
- 下載這張 PNG。下載下來的檔案,來自原始尺寸的輸出畫布,而不是頁面上比較小的預覽圖。
輸出尺寸與不調整大小規則
圓形裁切最重要的一條規則,就是輸出尺寸,等於來源比較短的那一邊。這個工具不會重新取樣、不會放大,也不會縮小。它只會做遮罩。下面的表格,顯示了這個工具明確支援的三種來源形狀,分別會得到什麼結果。
| 來源形狀 | 來源範例 | 輸出 PNG 尺寸 | 置中的來源區域 |
|---|---|---|---|
| 橫式 | 1200 x 800 | 800 x 800 | x = 200 to 1000 |
| 直式 | 800 x 1200 | 800 x 800 | y = 200 to 1000 |
| 正方形 | 1000 x 1000 | 1000 x 1000 | 整張圖片 |
你可以用簡單的算術,在任何一張圖片上驗證同一條規則。對於寬度 W 與高度 H,置中正方形的邊長是 min(W, H)。輸出畫布,就是這個值乘以這個值。圓形的中心在 (min(W, H) / 2, min(W, H) / 2),半徑是 min(W, H) / 2。這一條公式,就是這個操作背後全部的數學,而渲染器,會在任何像素被畫出來之前,先套用它。
什麼時候置中正方形是錯誤的選擇
因為這條規則是自動的,所以有些輸入,置中裁切會錯過主體。如果一張臉,在一張較高的直式照片裡,靠近上緣,置中的垂直區域,可能會裁到額頭。如果一張較寬的商品照片,主體位在最左邊或最右邊,一個置中的正方形,就會裁掉它的一半。這裡沒有定位控制項、沒有縮放滑桿,也沒有自動主體偵測。這個工具刻意保持簡單,好讓輸出結果容易預測與驗證。
解決方法,是先處理好來源圖片。如果你需要一個自訂的矩形區域,就在Image Cropper裡打開原始圖片;如果你需要一個特定的像素尺寸,就在Image Resizer裡打開;如果來源是側躺的,就在Image Rotator裡打開。一旦主體置中,而且不需要的邊緣都去掉了,再執行圓形裁切,置中正方形這條規則,就會做出你想要的結果。
也要保留原始檔案。瀏覽器的反鋸齒處理,可能會在曲線正上方,留下一條薄薄的、部分透明的像素帶,在正常尺寸下看起來很柔和,但在某些背景上,可能會顯現出一圈淡淡的光暈。在發布之前,對照淺色與深色兩種表面檢視結果,只需要幾秒鐘,卻能避免之後公開修補的麻煩。
圓形裁切周邊相關的工具
圓形裁切,很少是你唯一需要的編輯。要把一個圓形大頭貼,放到一個純色背景上,Add Background to PNG工具,能用一個精確的實色,取代透明區域,同時保持原始像素尺寸不變。要在視覺上柔化這條曲線,Add Shadow to Image工具,能在圓形周圍,加上一個受控制的陰影,做出漂浮的效果。要在不失去透明度的情況下縮小檔案大小,Image Compressor,能在你的瀏覽器裡,在本機重新編碼 PNG。想要一個比較柔和、非圓形的替代方案,Round Image Corners工具,提供的是一個可調整的圓角半徑,而不是一個完美的圓形。這些步驟,每一個都在同一套純瀏覽器的工作流程裡,所以在各次編輯之間,檔案永遠不需要離開你的機器。
如果你還在比較選項,圓形裁切入門:簡單的第一份指南 有詳細說明。
如果你還在比較選項,如何在 macOS 預覽程式(或你的瀏覽器)裡裁切圖片 有詳細說明。