图片圆形裁剪

什么是图片圆形裁剪？

圆形裁剪是一种效果，将矩形图片裁剪成完美的圆形，完全去除四个角，只保留内切圆。圆与原图较短边对齐——图片先居中裁剪为正方形，再把正方形裁剪为直径等于其边长的圆。结果就是几乎所有现代应用和社交平台都使用的经典圆形头像或"个人资料图片"轮廓。

由于圆形是切掉角部而非在上方绘制，结果取决于文件格式。PNG 和 WebP 支持透明，圆外区域完全透明，图片可放置于任意背景上。JPG 不支持透明，编码时角部会填充为纯色（通常为黑色）。本工具完全在浏览器中用 Canvas 2D API 完成裁剪，图片绝不上传到服务器。

圆形裁剪工具的原理

本工具使用浏览器 Canvas 2D API。解码图片后，先计算原始宽度和高度中的较小值，然后创建该尺寸的正方形画布。原图被居中裁剪到正方形上，使照片焦点保持在中央。然后用 ctx.arc(size/2, size/2, size/2, 0, Math.PI * 2) 构建圆形剪裁路径，并用 ctx.drawImage 在剪裁区域内绘制图片。只有圆内的像素被保留——角部的所有内容被切为透明。

没有可调滑块，因为圆始终是正方形的完美内切圆。如果源图本身就是正方形，结果是一个使用整张图片的干净圆形。如果源图是横向或纵向的，较长边会从两侧均匀裁剪，使主体保持居中。推荐使用 PNG 输出格式以保留透明圆角；WebP 也支持透明。JPG 不支持透明，被切掉的角部在编码文件中会填充为黑色。

源图宽高比与结果圆形

由于圆始终是较短边正方形的内切圆，源图宽高比决定了图片被保留多少。下表显示常见宽高比的处理方式：

源图宽高比	保留内容	裁掉内容
1:1（正方形）	整张图片	仅四个角
4:3（横向）	居中 3:3 正方形	左右边缘
16:9（宽屏）	居中 9:9 正方形	更多左右边缘
3:4（纵向）	居中 3:3 正方形	上下边缘
9:16（竖屏/故事）	居中 9:9 正方形	更多上下边缘

如果需要选择哪部分内容留在圆内，请先用专门的裁剪工具把图片裁为正方形，再通过本工具处理——整张正方形都会被使用。

何时使用圆形裁剪

当需要圆形轮廓或圆形视觉上合适时，圆形裁剪就是正确选择。常见场景包括：

• 头像和个人图片。几乎所有社交平台（Twitter、Instagram、Facebook、LinkedIn、Discord、Slack）都将用户头像显示为圆形——预先裁剪成圆形能保证构图正确。
• 团队和员工页。圆形头像照是公司网站"关于我们"和团队花名册页面的事实标准。
• 评论和证言。评论和证言旁的用户照片几乎都是圆形的。
• Logo 和品牌标识。应用图标、favicon 和合作伙伴 logo 常放置在圆形容器内——预先裁剪成圆形可避免难看的黑边。
• 贴纸与装饰图形。圆形剪裁在剪贴簿、聊天贴纸和装饰性设计元素中很受欢迎。
• 印刷与周边商品。徽章、马克杯、磁贴和别针上的圆形照片，源文件已是透明圆形时更易制作。
• 一致的画廊布局。把横向和纵向照片混合成统一的圆形网格，是展示多样图片的干净方式。

每当需要圆形轮廓时，一键圆形裁剪是得到干净、透明结果的最快方式。

如何将图片裁剪为圆形

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

1. 上传图片。点击上传区域，或拖拽一个 JPG、PNG、WebP、GIF 或 BMP 文件到此处。图片会立即解码并显示预览。
2. 选择输出格式。选 PNG 或 WebP 保留透明圆角，或选 JPG（圆角将填充为黑色）。
3. 点击应用圆形裁剪。工具会把图片居中裁剪为正方形，再剪裁为完美圆形，并并排显示原始与圆形后的文件大小。
4. 下载圆形图片。点击"下载圆形图片"保存结果。原始文件在设备上保持不变。

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