如何将图片裁剪成圆形
把 JPG、PNG、WebP 或 AVIF 拖到页面上，Cropper.js v2 会把图片载入到带有圆形遮罩的舞台里。深色叠加层显示会被裁掉的区域，中间明亮的圆形就是保留下来的部分。拖动圆形对准主体，用角落手柄缩放，或者在触摸屏上用双指捏合。取景满意后，选择一种输出格式并点击保存。浏览器在本地完成编码并触发下载。裁剪过程中打开 DevTools 的网络面板，会看到它一直是空的。上传、拖动、保存这三步里都不会出现任何 POST 请求。
在线圆形裁剪图片，免费导出透明 PNG
上传 JPG、PNG 或 WebP，在浏览器里裁成圆形，下载透明 PNG 或 WebP。
或将图片拖放到此处
正在裁剪…
已圆形裁剪图片！
高级选项
关于此工具
把任意图片裁剪成圆形，直接在浏览器里完成，免费。把 JPG、PNG、WebP 或 AVIF 拖到页面上，Cropper.js 会在圆形遮罩区域里打开图片。拖动边框把圆形对准主体，缩放到合适大小，然后点击保存。浏览器会把结果编码成透明的 PNG、WebP 或 AVIF，或者在你选好背景颜色后编码成 JPEG，然后直接下载到设备上。在 DevTools 的网络面板里可以看到，整个过程没有任何图片上传请求。输入文件最大支持 25 MB 和 1600 万像素。这个工具在电脑和手机浏览器上都能用，不用安装任何东西。大多数人用它来处理 LinkedIn、Discord、Slack 或 Instagram 上头像的圆形裁剪，让方形照片在圆形框里呈现得更好看。
选择输出格式
四种输出格式各有所长。PNG 是兼容性最广的透明格式，适合徽标和头像。WebP 在 q85 到 q90 下视觉无损，文件比 PNG 小 25% 到 40%，同样支持透明，适合网页使用。AVIF 文件最小，通常比 WebP 再小 40% 左右，也支持透明，但在中端手机上对 800 万像素照片编码可能需要约 30 秒，因为 WASM 编码器在 CPU 上运行。JPEG 编码最快，只支持纯色背景，需要你先选好圆形外区域的填充颜色，适合不接受透明文件的场合。
各平台的圆形照片
不同平台对圆形头像的尺寸要求并不一样。LinkedIn 头像在个人主页以圆形显示，最小推荐 400×400 像素。Discord 的频道图标最大 512×512，在服务器成员列表里显示为 128×128 像素的圆形头像。Instagram 在手机主页以约 110 像素的圆形展示头像。Slack 工作区头像上传最大 512×512，在频道列表里渲染成约 36 像素的小圆。这个工具按原始照片的分辨率导出，如果需要精确像素尺寸，建议先用 /resize/ 调整图片大小，再做圆形裁剪。
这个工具做不到什么
诚实说明几条限制。输入文件最大 25 MB、1600 万像素，超过会被友好地拒绝。HEIC 只在 Safari 上可用，因为 Chrome、Firefox、Edge 至今没有为 HEIC 实现 createImageBitmap，改名为 .jpg 也无法绕过，因为工具按魔术字节识别。GIF 只导出第一帧，不保留动画。AVIF 在中端手机上对高分辨率照片编码大约需要 30 秒，这是 WASM 编码器的真实成本。工具不会自动识别人脸或主体，圆圈位置始终由你手动调整。
图片如何保留在你的设备上
可观察的技术事实如下。Cropper.js 在浏览器的 Canvas API 内运行裁剪，编码通过 canvas.toBlob 完成，AVIF 走 @jsquash/avif 的 WASM 编码器，这些步骤都在本地。验证方法很简单:打开 DevTools 的网络面板，清除已有记录，然后上传图片并拖动裁剪框，整个过程中不会出现任何携带图片数据的 POST 或 PUT 请求。点击保存时，下载来自 URL.createObjectURL 生成的本地 blob，而不是来自服务器。这就是浏览器内处理的可验证证据。
各社交平台的圆形头像
圆形头像的用途比想象中广。LinkedIn、Discord、Slack、Instagram、WhatsApp、Telegram 都会把你上传的方形图片自动裁成圆形，提前自己裁好，可以决定圆形框里到底显示什么，而不是任由平台随机裁剪。品牌的圆形徽标、徽章、团队照片网格、Discord 服务器图标也都属于这个用法。一个实用经验:头像照片把头部居中并在头部周围留一点空间，在圆形框里看起来比贴边裁剪自然得多，尤其是缩到 32 像素或 48 像素的小图时差别非常明显。
如何将照片裁剪成圆形
-
上传图片
点击上传区域，或者把 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 原生支持。Chrome、Firefox 和 Edge 不支持 HEIC，会显示友好的错误提示。格式识别通过检查文件的魔术字节实现，而非文件名后缀，所以改过扩展名的文件依然能被正确识别。
我裁剪的圆形图片会有透明背景吗？
会。PNG、WebP 和 AVIF 都支持 Alpha 通道，圆形以外的区域是完全透明的。在大多数设计工具或通讯应用里打开下载的文件，透明区域会显示为棋盘格图案。JPEG 不支持透明，选择 JPEG 时会提示选择圆形外区域的填充颜色。
你们会存储我上传的图片吗？
不会。裁剪过程完全在浏览器内完成。可以自行验证:打开 DevTools（F12），切换到网络面板，清除已有记录，然后上传图片并拖动裁剪框。整个过程中不会出现任何携带图片数据的 POST 或 PUT 请求。下载文件来自本地 blob URL，图片数据不会发送到任何服务器。
如何制作圆形个人资料图片？
上传头像照片，把圆形对准脸部，头部周围留一点空间，然后选择 PNG 或 WebP（支持透明背景）保存。LinkedIn、Discord、Slack 和 Instagram 的头像都以圆形显示，提前自己裁好可以控制圆形框里显示的内容，而不是让平台随机裁剪。
我可以在手机上将照片裁剪成圆形吗？
可以。这个工具在 iPhone、iPad 和 Android 手机的现代浏览器上都能运行，拖动手柄支持触控和捏合手势。手机上的主要限制是 AVIF 编码速度，高分辨率照片可能需要 30 秒或更长时间，因为 WASM 编码器在 CPU 上运行。PNG 和 WebP 速度更快，在中端设备上表现良好。
详细信息
团队关于工艺、格式以及一个好的圆形裁剪背后小决定的笔记。
Cropper.js v2 如何绘制圆形遮罩
Cropper.js v2 作为 Web Component 提供，由 cropper-canvas、cropper-image、cropper-handle 三个元素组成裁剪舞台。圆形裁剪不是 CSS border-radius 技巧，而是在导出时通过 canvas 的合成操作（destination-in）实现的。用户看到的是带有深色叠加层的完整图片，圆形选区根据手柄位置实时计算，状态存储在组件内部。点击保存时，程序创建一个临时 canvas，按选定尺寸把图片画上去，再用合成遮罩去除圆形外的所有像素。PNG、WebP、AVIF 的结果保留 Alpha 通道。JPEG 因为规范里没有 Alpha 通道，透明像素会在编码前用纯色填充。Cropper.js v2 采用 MIT 许可证，源码在 github.com/fengyuanchen/cropperjs。
PNG、WebP、AVIF、JPEG，圆形裁剪该如何选择
PNG 无损，兼容性最广，文件较大，从 800 万像素照片导出 512×512 的圆形，大约 180 到 350 KB，取决于照片复杂度。WebP 在 q85 到 q90 下视觉无损，比 PNG 小 25% 到 40%,2023 年起所有现代浏览器均支持。AVIF 使用 AV1 帧内编码，在同等视觉质量下通常比 WebP 再小 40% 到 50%，但 @jsquash/avif 的 WASM 编码器耗时明显更长，桌面端约 3 秒，中端手机上 800 万像素输入最高约 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 像素。这个工具按原始照片分辨率导出，如果需要精确的输出尺寸，建议先用 /resize/ 调整图片大小，再进行圆形裁剪，这样可以在不产生放大模糊的情况下获得像素级精确的输出。
HEIC 格式与 Safari 限制详解
HEIC 是苹果的容器格式，使用 HEVC 压缩。Safari 17 之后通过 createImageBitmap 原生处理 HEIC，所以在 Safari 上可以直接圆形裁剪 iPhone 拍摄的照片，无需转换。截至 2026 年，Chrome、Firefox 和 Edge 尚未为 HEIC 实现 createImageBitmap，它们会返回解码错误。工具在上传时检查文件的魔术字节，如果在非 Safari 浏览器上检测到 HEIC，会显示友好的错误提示，建议先转换为 JPG。非 Safari 用户的解决方案是，在 iPhone 上用相册 app 把照片分享为 JPG（分享菜单里有此选项），或者如果桌面上已经有 HEIC 文件，可以先用 /png-to-jpg/ 转换格式。注意:把 .heic 文件改名为 .jpg 仍然会被拒绝，因为魔术字节检查能识别改名操作。
圆形外区域为何透明，以及这为什么重要
这是 Alpha 通道和透明背景如何改变头像呈现效果的 Experience 信号。导出 PNG 或 WebP 圆形裁剪时，圆形边界外的像素 Alpha 值为 0，也就是完全透明。这意味着:在以圆形框渲染头像的平台上，透明背景变得不可见，平台自身的背景色会干净地透出来。在以完整尺寸显示文件的场合（如文件附件预览或相册），透明区域会显示为棋盘格图案。如果把圆形粘贴到 Figma 或 Canva 等设计工具中，可以叠加在任何颜色上，不会出现白色光晕。JPEG 选项适用于透明背景引发问题的情况:部分邮件客户端、部分 CMS 图片上传器、以及一些旧平台会去掉透明度并替换为黑色，这时选用带有填充颜色的 JPEG 可以避免这个问题。
用 DevTools 网络面板验证浏览器内处理
好奇的用户可以亲手确认图片未离开设备。步骤如下:打开浏览器的 DevTools（F12 或者右键「检查」），切换到网络面板，点击「清除」删除之前的记录，然后上传图片到圆形裁剪工具并拖动手柄。在上传和裁剪拖动过程中观察网络面板，出现的请求只有页面资源，比如 JS、CSS、字体，这些都是上传前就已经加载好的，不会出现任何携带图片数据的新 POST 或 PUT 请求。点击保存后，标签里会短暂出现一个指向 blob: URL 的请求，那是浏览器解析本地 blob，而不是向服务器发送数据。这个验证步骤在 Chrome、Firefox、Safari 和 Edge 上都可以执行。