iPhone 的「照片」App 只能裁切矩形和正方形;Apple 內建的編輯器並沒有圓形遮罩,所以「在 iPhone 上圓形裁切」必須透過從第三方 App Store 下載的應用程式,或在 Safari 中執行的瀏覽器工具來完成。Circle Crop 是一款免安裝的工具,你可以在任何 iPhone 的行動版 Safari 中直接開啟,它會產生一張透明圓形的圖片,而這是 iPhone「照片」App 本身無法做到的。Output PNG 為一張全解析度的 PNG,四個角落為透明。整個過程都在瀏覽器分頁中進行;檔案透過暫時性的物件 URL 在本機解碼,不會被傳送到遠端伺服器。這是最直接的方式,能用於製作個人檔案照片、市集大頭貼、作者自傳頭像,或通訊錄聯絡人卡片,當目標設計需要圓形圖片時特別好用,而透明的角落讓這張 PNG 放在淺色或深色背景上時,不會在主體周圍留下有色方形的光暈。

circle crop on iphone
How to Circle Crop on iPhone in Safari

iPhone 照片編輯器能與不能裁切的內容

在 iPhone 上開啟「照片」App,點選「編輯」,然後點選螢幕底部的裁切圖示。編輯器會顯示一個矩形外框、幾組長寬比預設(例如正方形、9:16、16:9、4:3、3:4 和 2:3),以及旋轉、拉直、翻轉和縮放係數,可讓你在圖片內縮小外框。這個工具中沒有圓形、橢圓、圓角矩形或任何其他非矩形的遮罩。「儲存」對話框也只會將檔案存成 JPEG 或 HEIC,這兩種格式都不支援透明通道,所以即使你設法把圓形裁切貼進編輯器,儲存時仍會帶著實心背景。這就是為什麼當目標設計需要圓形圖片時,必須採用以專用圓形裁切工具為核心的工作流程。

少數 iOS 的替代方案效果接近。「照片」App 內的「標記」功能可以在有色背景上放置一個有色圓形,營造出圓形圖片的視覺效果,但匯出的檔案仍是正方形圖片,圓形周圍的像素仍然被填滿。iOS「捷徑」可以合成圓形 PNG,但通常需要自行建立捷徑或安裝第三方捷徑包。內建的捷徑並不會產生供一般用途使用的透明圓形。另一方面,行動版 Safari 支援 Canvas API 與 PNG 匯出,所以基於瀏覽器的圓形裁切工具可以產出真正的透明圓形 PNG,除了開啟 URL 和選擇檔案之外不需要任何設定。

How to Circle Crop on iPhone in Safari

請在你的 iPhone 上執行以下步驟。

  1. 開啟 Safari 並前往 Circle Crop 工具。
  2. 點選檔案選擇器,然後從「照片」、「檔案」或 iCloud Drive 中選擇 JPG、PNG 或 WebP 檔案。頁面會顯示來源尺寸,讓你在裁切前確認檔案。
  3. 點選 Create circle crop。工具會辨識圖片較短的一邊,以該像素大小建立輸出畫布,並繪製以來源為中心、最大的正方形,再裁切成圓形。
  4. 檢查預覽結果。圓形以外的角落應該是透明的;如果預覽顯示有色的角落,請重新產生裁切結果,並確認來源圖片為支援的格式。
  5. 點選 Download。在分享選單中選擇「儲存影像」將 PNG 加入「照片」App,或選擇「儲存到檔案」直接寫入 iCloud Drive 或「我的 iPhone」。
  6. 在「照片」中開啟儲存的 PNG,確認它在淺色與深色背景上都呈現圓形,再將其上傳為大頭貼或附加到電子郵件簽名中。

輸出的外觀

輸出是一張帶有 alpha 通道的 PNG,使圓形以外的每個像素完全透明。它的尺寸不受頁面上可見預覽大小的限制;畫布一律採用從來源圖片較短一邊所衍生的自然像素大小。下表列出幾種常見輸入尺寸所對應的精確輸出尺寸與所使用的來源矩形。

來源尺寸輸出 PNG 尺寸所使用的來源矩形
1200×800(橫向)800×800x = 200 至 x = 1000
800×1200(直向)800×800y = 200 至 y = 1000
1000×1000(正方形)1000×1000完整圖片
1920×10801080×1080x = 420 至 x = 1500
1500×844844×844x = 328 至 x = 1172

下載下來的 PNG 可能會比上傳的原始 JPEG 或 WebP 檔案更大,即使在橫向情況下像素數量較少。PNG 使用無失真壓縮並帶有完整的 alpha 通道,所以一個僅幾百 KB 的 1200×800 JPEG,可能會產生接近四分之三 MB 的 800×800 PNG。這是正常現象,並不代表輸出有問題;JPEG 會捨棄細節以維持檔案小,而 PNG 則保留每個原始像素。

裁切幾何的運作方式

當檔案載入後,工具會透過瀏覽器中的暫時性本地物件 URL 解碼檔案,並讀取其寬度與高度。較短的一邊定義輸出正方形的邊長,因此輸出畫布在兩個軸上具有相同的像素數。來源矩形以原始圖片為中心:在較長軸上的起始座標等於較長邊與較短邊差值的一半,並延伸整整個較短邊的長度。接著對輸出畫布套用圓形裁切路徑,其中心位於輸出邊長的一半處,半徑等於輸出邊長的一半,這保證了圓形正好內切於正方形之中。

以一張 1200×800 的橫向照片為例,計算過程如下:

  • 較短邊 = 800 像素
  • 輸出畫布 = 800×800
  • 來源矩形起始於 x = (1200 − 800) ÷ 2 = 200
  • 來源矩形結束於 x = 200 + 800 = 1000
  • 輸出圓形中心 = (400, 400);輸出圓形半徑 = 400

因此原始橫向寬度中的 800 像素會落在圓形內,而左右兩側各有 200 像素會被捨棄。如果主體位於畫面中央,它會剛好落在圓形內。如果主體比較靠近左邊或右邊,裁切並不會移動以將它保留在畫面內;你必須先重新調整來源圖片的位置。

何時應先裁切或旋轉來源

這個工具一律使用最大的中央正方形,所以對置中的主體很寬容,但對偏離中心的主體則不寬容。以下是一些需要在圓形裁切前先編輯來源的常見 iPhone 情境:

  • 臉部位於垂直中心線左側或右側的大頭貼
  • 團體合照,而你只想把其中一個人放進大頭貼中
  • 因為手機拿的方向不對而拍成橫向的照片
  • 裁切過緊,下巴、帽子或頭髮已經觸及上下邊緣

若要在圓形遮罩之前重新調整主體位置,請使用 Image Cropper 設定一個框住主體的自訂矩形區域,然後再回到 Circle Crop 處理該張圖片。若是橫向的照片,請先執行 Image Rotator 將圖片旋轉成正向,再對旋轉後的結果執行圓形裁切。若是邊緣過緊,請在裁切前先擴大來源圖片的畫布,或重新拍攝一張主體周圍留白較多的照片。

工具接受與拒絕的輸入

工具接受壓縮大小不超過 25 MiB 的 JPG、PNG 與 WebP 檔案,並在解碼後套用第二組限制:每邊不得超過 20,000 像素,且總像素數不得超過 4,000 萬像素。不支援 SVG 與動畫 GIF,因為此工具是為一般靜態點陣圖所設計,無法保留向量行為或動畫。輸出無論輸入格式為何,都會編碼為 image/png,且輸出 PNG 不會保留原始檔案的 EXIF 中繼資料、色彩描述檔或方向標記。

特別針對 iPhone:

  • Circle Crop 僅接受 JPEG、PNG 與 WebP。iPhone 的 HEIC 照片需要先從「照片」App 中匯出為 JPEG,方法是點選「分享」,然後選擇「儲存到檔案」並將影像格式設為 JPEG,再於 Safari 中選取該檔案。
  • 支援格式(JPEG、PNG 或 WebP)的照片可以直接從「照片」或「檔案」中選取。
  • iPhone 的 PNG 螢幕擷圖可以直接接受,無需轉檔。

如果檔案超過 25 MiB、包含不支援的位元組、無法解碼,或超過 4,000 萬像素上限,頁面會顯示明確的錯誤訊息,並清除任何先前的結果。該錯誤不會讓頁面卡住,因此你可以立即挑選另一個檔案。

取得乾淨圓形結果的實用技巧

以下是一些能在 iPhone 上產生明顯更佳圓形裁切結果的習慣:

  • 持握手機時讓主體位於觀景窗中央,並在左右兩側留有相等的空間。
  • 與主體保持一兩隻手臂的距離,讓頭部或物體不會填滿整個畫面。
  • 將相機保持在與眼睛同高的位置,讓眼睛落在畫面的垂直中心附近。
  • 以適合正方形的解析度拍攝照片,或擷取比預期稍寬的來源,方便之後有餘裕進行裁切。
  • 在上傳之前,分別在淺色與深色背景上檢查儲存的 PNG;透明像素在兩種背景下都應保持透明。
  • 保留原始未編輯的來源檔案,以便日後改變構圖想法時可以重新執行圓形裁切。

iPhone 使用者的相關工具

Circle Crop 涵蓋一項工作——把中央正方形變成圓形——但周圍還有幾項相關任務。針對預先編輯來源圖片:

  • Image Cropper 讓你可以選擇自訂矩形區域,而非最大的中央正方形。
  • Image Rotator 會在圓形遮罩之前,將橫向的圖片旋轉 90°、180° 或自訂角度。

針對圓形 PNG 的後續編輯: