图片圆角

什么是图片圆角？

图片圆角是一种效果，将矩形图片四个尖角替换为平滑的圆弧，使整体轮廓更柔和、更友好。圆角不再是每个角 90° 的硬角，而是从一条边平缓地弧线过渡到另一条边，切掉角部像素、显露出图片背后的内容。圆弧的半径——以像素为单位——控制圆角的明显程度：小半径产生轻微倒角，大半径则形成胶囊或药丸形状。

圆角是现代 UI 和网页设计中最流行的视觉处理之一，能柔化缩略图、头像、卡片和按钮的外观，让照片融入已经使用圆角几何的设计。由于效果是切掉角部像素而非在上方绘制，结果取决于输出格式：PNG 和 WebP 支持透明，被切掉的角部会透出图片背后的内容；JPG 则将其填充为纯色（通常为黑色）。本工具完全在浏览器中用 Canvas 2D API 完成圆角处理，照片绝不上传。

圆角工具的原理

本工具使用浏览器 Canvas 2D API。解码图片后，会创建同尺寸画布，背景保持透明（不填充），然后用 ctx.roundRect 在现代浏览器中构建圆角矩形剪裁路径，旧浏览器则回退到 ctx.arcTo。然后用 ctx.drawImage 在剪裁区域内绘制图片，只保留圆角矩形内的像素——角部的所有内容被切为透明。

半径滑块从 0 到 200 像素。半径为 0 时不产生圆角（直角矩形图片，相当于直接通过）。半径会自动限制在较短边的一半以内，以防止弧线重叠产生无效形状——最大值时结果会变成完美圆形或胶囊形。推荐使用 PNG 输出格式以保留透明圆角；WebP 也支持透明。JPG 不支持透明，被切掉的角部在编码文件中会填充为黑色。

圆角半径值及其效果

半径直接控制每个角被切掉的多少。下表列出各半径范围的效果：

半径	效果	典型用途
0 px	尖角——原始	直通，方形缩略图
4-12 px	轻微倒角	照片卡片、博客图、柔和现代 UI
15-30 px	明显圆角	头像、缩略图、社交卡片
40-80 px	强圆角	应用图标、按钮式图片
100-150 px	重圆角	贴纸样机、装饰性边框
≥ 短边的一半	药丸/胶囊/圆形	头像式完全圆头

从默认 20 px 开始，调整到圆角与设计其余部分匹配为止。半径会自动上限，因此很大的值也能产生有效形状。

何时为图片添加圆角

当硬矩形边缘对设计而言过于尖锐或过于写实时，添加圆角是正确的选择。常见场景包括：

• 头像和个人图片。圆角方形或圆形是大多数应用和社交平台上用户头像的事实标准。
• 照片卡片和缩略图。圆角让画廊缩略图和内容卡片看起来更柔和、更友好。
• UI 整合。放置在圆角 UI 组件（按钮、面板、模态框）内的图片，当角部与周围几何形状匹配时更协调。
• 社交媒体帖子。圆角照片在方形或文本密集的 Feed 中突出，且不那么生硬。
• 营销与广告创意。整个活动使用一致的圆角半径能让创意资产呈现统一、品牌化的观感。
• 贴纸与装饰元素。重圆角或完整药丸形状把照片变成俏皮的图形元素。
• 印刷与编辑设计。杂志和小册子中圆角照片比尖角照片更现代。

每当照片需要更柔和、更友好或更融入圆角 UI 的感觉时，添加圆角通常是最简单、最有效的处理方式。

如何为图片添加圆角

使用本工具添加圆角只需几秒，全程在浏览器中完成——无需上传、无需注册、无水印。工具在本地解码图片，通过 Canvas API 剪裁圆角矩形，并按所需格式导出。请按以下步骤操作：

1. 上传图片。点击上传区域，或拖拽一个 JPG、PNG、WebP、GIF 或 BMP 文件到此处。图片会立即解码并显示预览。
2. 设置圆角半径。滑块从 0 到 200 px。0 不产生圆角，默认 20 px 给出明显但适度的弧度。
3. 选择输出格式。选 PNG 或 WebP 保留透明圆角，或选 JPG（圆角将填充为黑色）。
4. 点击应用圆角。工具会剪裁图片，并并排显示原始与圆角后的文件大小。
5. 下载圆角图片。点击"下载圆角图片"保存结果。原始文件在设备上保持不变。

由于所有步骤都通过 JavaScript 在浏览器本地运行，图片绝不会被上传到服务器。这让圆角工具完全私密、快速，也适合处理敏感或机密图片。