如何裁切圓形圖片
點擊上傳區域或將圖片直接拖放到頁面上，畫面會自動以圓形遮罩開啟圖片並置中對齊。拖動圓形以對準臉部或標誌，用角落控制點或滾輪調整大小。圓形裁切框由 Cropper.js v2 驅動，在瀏覽器內即時運算。點擊儲存後，瀏覽器會在本地完成編碼並下載檔案。開啟 DevTools 的網路面板觀察整個過程，你會發現沒有任何攜帶圖片資料的 POST 請求。
線上圓形裁切圖片工具
上傳 JPG、PNG、WebP 或 AVIF，下載圓形透明 PNG，在瀏覽器中執行。
或將圖片拖放至此
正在裁剪…
已圓形裁切圖片！
進階選項
關於此工具
把任何圖片裁切成完美圓形，全程在你的瀏覽器裡完成。拖入 JPG、PNG、WebP 或 AVIF，用滑鼠或手指拖動調整圓形裁切框的位置與大小，再下載帶透明 alpha 通道的 PNG、WebP、AVIF，或選 JPEG 格式並指定背景色。打開瀏覽器 DevTools 的網路面板就能確認，沒有任何 POST 請求離開你的裝置，原始檔案也不會上傳到任何伺服器。支援最大 25 MB、800 萬像素的圖片，編碼時間約 800 毫秒，在 Chrome、Safari、Firefox 上的桌機、平板和手機都能順跑，行動裝置上也不需要安裝任何應用程式。最常見的用途是把大頭照裁成圓形，做成 LinkedIn 大頭貼、Discord 頭像、Slack 團隊圖示，或 Instagram 個人檔案的圓形顯示效果，輸出畫面邊緣保持平滑無鋸齒。
選擇輸出格式
四種輸出選項各有用途。PNG 保留圓形外的透明背景，最適合需要透明的標誌與大頭貼。WebP 同樣支援透明，檔案通常比 PNG 小 25 至 35%，適合網頁使用。AVIF 是最小的透明格式，但 @jsquash/avif 在中階手機上編碼較慢，約需 30 秒。JPEG 輸出無透明度的實心圓形，可自行選擇填充顏色。JPEG 規格不支援 Alpha 通道，因此無法保留透明背景。
各平台的圓形照片
各平台對個人資料圖片有不同的顯示規格。LinkedIn 個人資料照片最小顯示為 400×400 像素。Discord 伺服器圖示最大 512×512 像素，使用者頭像在成員列表中顯示為 128×128 像素。Instagram 個人資料圖片在手機上約為 110 像素圓形。Slack 工作區頭像上傳最大 512×512 像素。本工具以原始解析度匯出，若需精確像素尺寸，建議先用調整尺寸工具調整後再進行圓形裁切。
此工具的限制
誠實說明工具做不到的事。檔案大小上限 25 MB，像素上限 16 百萬，均於客戶端強制執行。HEIC 僅在 Safari 上可正常載入，Chrome、Firefox、Edge 會拒絕。動畫 GIF 僅輸出第一幀，動畫不保留。AVIF 在中階手機上編碼較慢，實測約 30 秒。沒有 AI 自動偵測臉部或主體，圓形位置完全由你手動調整。競爭對手通常省略限制說明，我們選擇直白列出。
圖片如何保留在裝置上
Cropper.js 在瀏覽器的 Canvas API 內執行裁切,@jsquash/avif 等編碼器也在瀏覽器中運行。實際結果可自行驗證:開啟 DevTools 的網路面板並上傳圖片，整個裁切過程中不會出現任何攜帶圖片資料的 POST 或 PUT 請求。下載的檔案來自本地的 blob URL，由 URL.createObjectURL 建立。這些都是可在 Chrome、Firefox、Safari、Edge 上觀察的技術事實。
各社群平台的圓形大頭貼
大多數社群平台會將頭像顯示為圓形。直接上傳正方形照片讓平台自動裁切，往往會切掉臉部或留下大量空白。自己先裁切成圓形，可以精確控制圓框內呈現的內容。同樣適用於圓形標誌、團隊照片徽章、Discord 伺服器圖示。最佳實踐:以頭部為中心並保留適當空間的大頭照，在圓形裁切後會比過度裁剪的效果好。
如何將照片裁剪成圓形
-
上傳圖片到頁面上。
點擊上傳區域，或將 JPG、PNG、WebP、AVIF 或 GIF 檔案直接拖放到頁面上。圓形裁切框會自動開啟。
-
將圓形調整到主體上方。
拖動圓形以對準臉部或標誌的中心。用縮放手勢或滾輪調整大小，直到取景滿意。
-
選擇輸出格式。
若需要透明圓形，選擇 PNG 或 WebP。若要最小檔案，選擇 AVIF。若需要純色背景，選擇 JPEG。
-
點擊儲存並下載檔案。
瀏覽器會在本地完成編碼並下載檔案，檔名保留原始名稱並加上 -circle。
常見問題
如何將圖片裁切成圓形?
將圖片拖放或點擊上傳到裁切框，支援 JPG、PNG、WebP、AVIF、GIF 或 BMP。Cropper.js 會以圓形遮罩開啟圖片並自動置中。拖動圓形調整主體位置，用角落控制點或縮放手勢調整大小，然後點擊儲存。瀏覽器預設會編碼並下載透明 PNG。典型照片的整個流程在 30 秒內完成。
支援哪些輸入圖片格式?
輸入支援 JPG、PNG、WebP、AVIF、GIF(僅第一幀，動畫不保留)、BMP 和 SVG。HEIC 在 Safari 上可正常使用，因為 Safari 透過 createImageBitmap 原生支援 HEIC。在 Chrome、Firefox 和 Edge 上，HEIC 檔案會顯示提示訊息建議先轉換格式。格式辨識是透過魔術位元組進行，而非副檔名，因此改名的檔案仍能正確識別。
裁切後可以下載哪些格式?
下載選單提供四種選項。PNG 保留圓形外的透明區域，為預設格式。WebP 通常比 PNG 小 25 至 35%，同樣支援透明背景。AVIF 是三種透明格式中最小的，但在中階手機上可能需要約 30 秒編碼。JPEG 輸出無透明度的實心圓形，背景顏色可自行選擇。
可以製作透明背景的圓形圖片嗎?
可以。PNG、WebP 和 AVIF 均支援 Alpha 通道，因此圓形外的區域完全透明。在大多數設計工具或通訊應用程式中開啟下載的檔案，背景會顯示為棋盤格，代表透明。JPEG 不支援透明度，選擇 JPEG 時需指定外部區域的填充顏色。
為什麼要把圖片裁切成圓形?
大多數社群平台會將個人資料圖片、大頭貼和伺服器圖示顯示為圓形。直接上傳正方形照片讓平台自動裁切，往往會切掉臉部或留下大量空白。自己先裁切成圓形，可以精確控制圓框內顯示的內容。同樣適用於圓形標誌、團隊照片徽章和品牌貼圖。
能在手機上使用這個工具嗎?
這個工具可在 iPhone、iPad 和 Android 手機的現代瀏覽器上執行。拖動控制點支援觸控和縮放手勢。手機上的主要限制是 AVIF 編碼時間，高解析度照片可能需要 30 秒以上，因為 WASM 編碼器在 CPU 上執行。PNG 和 WebP 的速度快很多，在中階手機上表現良好。
詳細資訊
團隊關於工藝、格式以及一個好的圓形裁剪背後小決定的筆記。
Cropper.js v2 如何繪製圓形遮罩
Cropper.js v2 以 Web Component 方式運行，使用 、、 等元素。圓形裁切並非 CSS border-radius 效果，而是在匯出時於 Canvas 上執行的複合操作，使用 destination-in 合成模式。你看到的是帶有暗色遮罩的完整圖片，圓形選取範圍根據控制點位置即時計算。點擊儲存時，工具建立一個暫時的 Canvas，圖片繪製後由複合遮罩移除圓形以外的所有像素。對於 PNG、WebP、AVIF，結果包含 Alpha 通道。JPEG 則在編碼前用純色填充透明像素，因為 JPEG 規格不支援 Alpha 通道。Cropper.js v2 採用 MIT 授權，原始碼位於 GitHub 的 fengyuanchen/cropperjs。
PNG、WebP、AVIF、JPEG 圓形裁切的格式選擇指南
格式決策對應實際用途。PNG 為無損格式，通用支援度最高，檔案較大，8 百萬像素照片匯出 512×512 圓形平均介於 180 至 350 KB 之間，視照片複雜度而定。WebP 在 q85 至 q90 下視覺上接近無損，比 PNG 小 25 至 40%，自 2023 年起所有現代瀏覽器均支援。AVIF 使用 AV1 幀內編碼，在相同視覺品質下通常比 WebP 小 40 至 50%，但 @jsquash/avif WASM 編碼器耗時較長，桌機約 3 秒，8 百萬像素圖片在手機中階裝置上最長可達 30 秒。JPEG 是編碼速度最快的格式，桌機約 400 毫秒，但無 Alpha 通道，僅在目標平台拒絕透明檔案時使用，例如部分 Slack 整合或部分電子郵件客戶端。大多數使用者應選擇 PNG 或 WebP。
各平台圓形頭像的實際規格
四個主要平台的實測尺寸要求。LinkedIn 個人資料照片最小顯示為 400×400 像素，在動態消息中約 48 像素。Discord 伺服器圖示最大 512×512 像素並顯示為圓形，使用者頭像在伺服器成員列表中為 128×128 像素，在聊天中為 32×32 像素。Instagram 個人資料圖片在手機個人頁面上約 110 像素圓形顯示，在動態縮圖中約 32 像素。Slack 工作區頭像上傳最大 512×512 像素，在頻道列表中顯示為約 36 像素的圓形。本工具以原始照片解析度匯出。若需要精確輸出尺寸，應先使用調整尺寸功能將圖片縮放到目標像素，再進行圓形裁切，以避免放大時模糊。
HEIC 格式與 Safari 限制說明
HEIC 是 Apple 使用 HEVC 壓縮的容器格式。Safari 17 以上版本透過 createImageBitmap 原生支援 HEIC，因此在 Safari 上圓形裁切 iPhone 照片可以直接進行。Chrome、Firefox 和 Edge 截至 2026 年仍未支援 HEIC 的 createImageBitmap，會傳回解碼錯誤。本工具在上傳時透過魔術位元組辨識格式，若在非 Safari 瀏覽器上偵測到 HEIC 檔案，會顯示提示建議先轉換為 JPG。非 Safari 使用者的解決方案:在 iPhone 的照片應用程式中，點擊分享並選擇以 JPG 分享，或在桌機上使用格式轉換功能將 HEIC 轉換。注意:副檔名改為 .jpg 的 HEIC 檔案仍會被魔術位元組辨識並拒絕。
為什麼圓形外的區域是透明的，以及這對頭像的影響
匯出 PNG 或 WebP 圓形裁切圖片時，圓形邊界以外的像素 Alpha 值為 0，代表完全透明。這意味著:在以圓形顯示頭像的平台上，透明背景會變得不可見，平台本身的背景顏色會完整顯示。在以完整尺寸顯示檔案的地方，例如檔案附件預覽或相冊，透明區域會顯示為棋盤格。將圓形圖片貼入 Figma 或 Canva 等設計工具時，可以疊加在任何顏色上而不留白色邊緣。JPEG 選項適用於透明背景造成問題的情況:部分電子郵件客戶端、部分 CMS 圖片上傳器和部分舊版平台會去除透明度並替換為黑色，使用帶有填充顏色的 JPEG 可以避免這個問題。
使用 DevTools 網路面板驗證瀏覽器內處理
好奇的使用者可以親自驗證圖片未離開裝置。步驟說明:開啟瀏覽器 DevTools，按 F12 或右鍵點擊「檢查」,進入網路面板，點擊「清除」移除先前的記錄，然後上傳圖片到圓形裁切工具並拖動控制點。觀察上傳和裁切拖動過程中網路面板的變化。出現的唯一請求是上傳前已載入的頁面資源，例如 JS、CSS、字型，不會出現任何攜帶圖片資料的新 POST 或 PUT 請求。點擊儲存後，面板會短暫出現一個 blob: URL 請求，這是瀏覽器解析本地 blob 的操作，並非向伺服器發送資料。此驗證步驟可在 Chrome、Firefox、Safari 和 Edge 上執行。