圓角圖片
將本機的 JPG、PNG 或 WebP 檔案四角圓潤,設定精確的 1–50% 半徑,並下載完整解析度的 PNG。
隱私權:你的檔案不會離開裝置,所有處理均在瀏覽器本機完成。
使用方式
- 1.選擇符合顯示檔案與畫素限制的本機 JPG、PNG 或 WebP。
- 2.將半徑從 1% 調整至 50%(以圖片較短邊為基準)。
- 3.選擇「圓角」,檢視相同尺寸的 PNG 預覽,並下載。
關於圓角圖片
「圓角圖片」會將本機的 JPG、PNG 或 WebP 轉換為相同尺寸的 PNG,並帶有透明的圓角。選擇圖片,將半徑控制從 1% 調整至 50%(以較短邊為基準),生成結果、檢視預覽,並下載。整個過程皆在當前瀏覽器標籤頁中完成,檔案被解碼、裁剪、重新編碼並完整保留。
半徑百分比是基於較短邊計算的。對於尺寸為 400×200 像素的圖片,選擇 25% 會產生 50 像素的角半徑;對於橫向圖片,同樣規則會使用其寬度。這讓控制在寬、高、正方形等不同來源下皆具可預測性。半徑會四捨五入為整數像素,而畫布則維持原始寬高不變。
渲染使用一個自然尺寸的畫布。工具會將畫布清空為透明,建立圓角矩形裁剪路徑,以原始尺寸繪製一次解碼後的來源圖片,並匯出 PNG。它不會先縮小預覽再匯出縮小版本,也沒有裁切中心、拉伸圖片、加上邊框或為透明角區後方塗上背景。
輸入限制為 JPG、PNG 或 WebP 檔案,且大小不得超過 25 MiB。解碼後的圖片也必須符合瀏覽器的安全預算,每邊最多 20,000 像素,總像素數不得超過 40 百萬像素。無效檔案、空檔案、不支援的型別、解碼失敗、無法使用畫布支援、無效半徑值以及 PNG 編碼失敗會產生可視錯誤,而非靜默或部分下載。
更改檔案或半徑會使先前結果作廢。當控制項被替換或元件關閉時,暫時性物件 URL 會被廢除,且非同步匯出無法覆蓋較新的選擇。輸出檔名以 -rounded-corners.png 結尾,清楚標示格式變更與轉換。
必須使用 PNG,因為 JPEG 不支援透明角區。因此 JPEG 源檔會被解碼並重新編碼,導致輸出位元組數可能增加,且原始 EXIF 元資料不會被畫布匯出保留。原本在 PNG 或 WebP 源檔中的透明像素,仍可在裁剪後的範圍內保留,但需符合瀏覽器標準解碼與 PNG 編碼規則。
預覽僅用於顯示,不決定下載解析度。設定 1% 會產生輕微的邊緣柔化,而 50% 則達到較短邊可達的最大圓角半徑。結果列會顯示來源匹配的尺寸、計算出的整數像素半徑、輸出格式與約定檔大小,這些資訊可確認橫向或豎向圖片未被靜默縮放。使用者可重複使用另一個半徑設定,無需重新上傳任何內容。
這個專注工具處理一張圖片與所有四個角落相同半徑。它不提供獨立的角落半徑、遮罩、圓形、裝飾邊框、陰影、漸層、批次處理、列印色彩管理、後設資料保留,或無損 JPEG 編輯功能。當需要這些控制選項或可逆轉的原始檔案時,請使用分層桌面編輯器。
方法與來源
驗證一個受限制的本機 JPG、PNG 或 WebP;解析一個整數半徑從 1 到 50 百分比;從較短的自然尺寸計算像素半徑;維持自然畫布尺寸;清空為透明;裁剪圓角矩形;以原始尺寸繪製一次解碼後的來源,不進行縮放;編碼 PNG;拒絕空輸出;保護非同步作業;並廢除被取代的物件 URL。
常見問題
- 圓角會改變圖片尺寸或裁切嗎?
- 不會。輸出維持來源的寬度與高度,僅將圓角外的像素設為透明。
- 為何下載的是 PNG?
- PNG 可儲存透明角區像素,而 JPEG 則無法做到。
- 圖片會上傳嗎?
- 不會。檔案解碼、裁剪、PNG 編碼、預覽與下載生成皆在瀏覽器本機完成。
- EXIF 的後設資料會被保留嗎?
- 不會。瀏覽器畫布匯出會產生新的 PNG 像素,並不會複製來源的元資料。
相關工具
圖片工具 使用指南
查看全部- Add Rounded Corners to a Photo in Your Browser (英文原文)
- How to Round Image Corners in Premiere Pro (英文原文)
- How to Round Image Corners in After Effects (英文原文)
- How to Add a Background to a PNG for Your Website (英文原文)
- Convert WebP to GIF on Mac Without Uploading It (英文原文)
- How to Convert WebP to GIF in Your Browser (英文原文)
- Convert SVG to PNG With a Transparent Background (英文原文)
- How to Convert SVG to JPG in Windows Without Software (英文原文)
- How to Make an Image a Solid Color in Photoshop (英文原文)
- How to Convert PNG to JPG Without Losing Quality (英文原文)
- Image Placeholder for Photoshop, Without the App (英文原文)
- Cities: Skylines 2: Create a Reference Overlay PNG Locally (英文原文)
- Turn Your Memento Backpack Division 2 Hunt Into a Meme (英文原文)
- Convert JPG to PNG Without Canva: A Faster Way (英文原文)
- How to Put an Image to PDF Without Uploading It (英文原文)
- Image to Base64 in JavaScript Without Writing Code (英文原文)
- Image to ASCII Explained: How Pixels Become Text (英文原文)
- Change Image DPI in Illustrator Without Re-encoding (英文原文)
- Resizing an Image in Paint? Try Your Browser Instead (英文原文)
- How to Split an Image Into a Grid for Instagram Posts (英文原文)