图片裁剪工具如何在浏览器中运行
图片通过浏览器的 File API 直接打开。没有服务器上传,设备外也不会保存任何临时副本。将裁剪框拖至所需位置,从四角或边缘调整大小,实时像素数值随之更新。坐标位于源图像像素空间,因此显示的数字就是输出文件的真实尺寸。在裁剪过程中打开 DevTools 并切换到网络面板,不会出现任何对外的图片请求。您拖入的文件和您下载的文件,在整个会话中都完整保留在设备内。
在线图片裁剪工具
支持 JPG、PNG、WebP、AVIF 格式，可锁定比例（1:1、16:9、9:16、4:5）或输入精确像素裁剪。
或将图片拖到这里
裁剪中…
图片已裁剪！
关于此工具
在浏览器中裁剪任意图片为矩形区域,使用 Araluma 图片裁剪工具,由 cropperjs v2 驱动。将 JPG、PNG、WebP 或 AVIF 文件拖入页面,裁剪画布立即打开。拖动控制点定位选区,锁定比例（1:1、16:9、9:16、4:5、3:2、4:3 或 A4）,或直接输入像素尺寸,选框会自动吻合。实时数值显示源图像像素空间中的真实输出尺寸,下载前即可确认。整个过程中图片始终保留在您的设备上,通过 DevTools 的网络面板可以验证:裁剪期间没有任何图片上传请求。PNG 和 WebP 输出保留原始文件的透明通道,JPG 输出会将透明区域替换为白色背景。每次导出均会移除 EXIF 元数据。该工具适合需要快速、精准矩形裁剪而不安装软件的用户,每次处理一张图片。
锁定比例或输入精确像素
点击比例预设（1:1 正方形、16:9 宽屏、9:16 竖屏、4:5、3:2、4:3 或 A4）,选框会锁定到该比例。在图像上自由拖动,选择要保留的区域。如需精确像素目标,在宽度和高度输入框中填写数值,选框会自动调整匹配。选区下限是 cropperjs v2 选区元素的固有最小值。输出始终等于选区在源图像中的像素尺寸。本工具不放大:如果选区宽 600 像素,输出文件也是 600 像素宽。
JPG 输出会将透明区域替换为白色
如果源文件含有透明区域（PNG、带 alpha 的 WebP 或带 alpha 的 AVIF）,而您选择 JPG 作为输出格式,这些透明像素会被填充为白色。JPG 没有 alpha 通道,无处存储透明信息。如需保留透明,请在完成界面的格式选择器中选择 PNG、WebP 或 AVIF。PNG 和 WebP 输出原样传递原始 alpha 通道。AVIF 也支持 alpha。格式选择器会标注每个选项的特性,下载前即可看到权衡。
使用键盘精确移动选区
按 Tab 跳到裁剪框,然后用方向键以每次一个像素的步进移动选区。按住 Shift 加方向键,步进增加到十个像素。这种键盘操作内置于 cropperjs v2 作为原生功能,不是独立的无障碍层。当您需要触控板无法实现的亚像素级视觉对齐,或在纯键盘环境下工作时非常有用。选区在移动端也响应触控:双指捏合缩放画布,然后拖动选区角点重新构图。两种情况下都无需切换额外模式。
输出格式:PNG、JPG、WebP 和 AVIF
裁剪后,在完成界面选择下载格式。PNG 是无损的,保留透明。JPG 默认采用质量 0.9 的有损压缩,大多数照片肉眼看不出与源图的差异。WebP 兼顾无损和有损模式,同样支持透明。AVIF 通过 @jsquash/avif 库以质量 0.9 编码,在同等视觉质量下文件最小,但会话中首次 AVIF 编码需要一次性下载 870 KB 的 WASM 模块。默认输出格式与输入相同:PNG 输入默认 PNG 输出,JPG 输入默认 JPG 输出。完成界面随时可以修改。
什么时候应该使用其他裁剪工具
本工具只裁剪矩形:正方形、横向比例、纵向比例和自定义像素尺寸。如需圆形裁剪（带透明圆角的头像）,请使用 Circle Crop。它共享相同的浏览器端处理流程,但输出的是圆形 PNG。对于已预设固定尺寸的平台模板（Instagram 1080×1080、YouTube 缩略图 1280×720、Facebook 封面 1200×630）,裁剪家族中的预设页面会以这些尺寸自动加载,无需计算。如果只想转换图片格式而不裁剪,请使用 Convert 工具,可输出 PNG、JPG、WebP 或 AVIF。
如何将照片裁剪成圆形
-
上传图片
打开工具,将 JPG、PNG、WebP 或 AVIF 文件拖入上传区,或点击浏览设备中的文件。
-
选择比例或像素尺寸
点击比例预设（1:1、16:9、9:16、4:5、3:2、4:3 或 A4）,或在宽度和高度输入框中填写精确像素值。
-
调整选框位置
将裁剪框拖至要保留的图像区域,从四角或边缘调整大小,直到实时数值显示所需的输出尺寸。
-
裁剪并下载
点击裁剪,在完成界面选择输出格式（PNG、JPG、WebP 或 AVIF）,将裁剪后的文件下载到设备。
常见问题
如何裁剪图片?
将图片拖入裁剪工具,选择比例或输入像素尺寸,把选框拖到要保留的区域,然后点击裁剪并下载。整个过程在浏览器中运行。在现代设备上,从上传到下载通常不到十秒钟。
如何在线裁剪 PNG 图片?
将 PNG 上传到裁剪工具,设置比例或尺寸,定位裁剪框,然后点击裁剪。在完成界面选择 PNG 作为输出格式,即可保留 alpha 通道不变。如果选择 JPG,透明区域将被替换为白色背景。PNG 输出无损,裁剪过程中不会损失任何像素质量。
如何不用 App 为 Instagram 裁剪图片?
在浏览器中打开裁剪工具,上传照片,点击 1:1 用于正方形 Instagram 帖子,或 4:5 用于纵向帖子。拖动选框框住主体,点击裁剪并下载。输出尺寸等于选区在源像素中的大小。如需 Stories 或 Reels,请使用 9:16 比例。
社交媒体各平台最佳裁剪比例是什么?
Instagram 正方形帖用 1:1,纵向帖用 4:5,Stories 和 Reels 用 9:16,YouTube 缩略图或 Twitter 头图用 16:9。Facebook 封面在 1200×630 像素（约 2:1）效果最好。微信朋友圈在 3:2 或 1:1 表现良好,小红书首图常用 3:4 竖图。本工具有 1:1、16:9、9:16、4:5、3:2、4:3 预设和自定义像素输入。
这个工具真的免费使用吗?
是的,在线裁剪图片完全免费。没有水印,没有按次收费,也不需要订阅。工具完全在您的浏览器中运行,我们不维护服务器队列、不消耗 GPU 配额、不依赖按量计费的 API。这种零运行成本结构使得免费使用是可持续的,而不是一个有时间限制的促销。
我需要将图片上传到服务器吗?
不需要。本工具完全在浏览器端运行,使用 File API 读取您的图片,通过 cropperjs v2 处理选区,然后用 canvas.toBlob 或 @jsquash/avif WASM 编码输出。打开 DevTools 网络面板,在裁剪过程中观察:没有任何对外的图片请求。您拖入的文件和下载的文件都保留在设备内。
详细信息
团队关于工艺、格式以及一个好的圆形裁剪背后小决定的笔记。
cropperjs v2 的技术架构
本工具基于 cropperjs 2.1.1 版本构建,这是原始 cropperjs 库的完全重写。v2 版本将旧的构造函数 API（new Cropper(img, { aspectRatio: 1 })）替换为 Web Components 架构。裁剪画布、选区覆盖层和图像元素都是通过浏览器的 CustomElementRegistry 注册的自定义 HTML 元素。这意味着 Shadow DOM 处理所有内部样式:无需导入单独的 cropper.css 文件,相比 v1 减少了一个 Vite 资源请求。比例锁定现在直接设置在选区元素上（cropperSelection.aspectRatio = 1）,而非构造函数中,因此可以在运行时改变比例,无需重新初始化整个裁剪界面。该库在 jsDelivr CDN 的 content-length 头中测量为 41 960 字节原始大小、12 175 字节 gzip 压缩后。这 12 KB 每个会话支付一次,通过 Vite 块拆分在所有预设裁剪路由中复用。
输出像素尺寸的计算方式（不放大）
当您在屏幕上拖动裁剪选区时,看到的坐标位于源图像像素空间,而非 CSS 像素空间。这一区别对高 DPI 屏幕很重要:一部设备像素比为 3× 的手机将一张 300 CSS 像素宽的图片显示为 900 真实像素,但选区坐标反映的是 900 真实像素,而非 300 CSS 像素。您下载的输出文件包含的像素数等于选区矩形在源图像中所代表的像素数。裁剪操作调用 cropperjs v2 API 中的 selection.$toCanvas(),这是一个异步方法,返回一个按选区像素尺寸大小的全新 HTMLCanvasElement。该画布随后传递给 canvas.toBlob() 处理 PNG、JPG 或 WebP,或传递给 @jsquash/avif 编码器处理 AVIF。不插入放大步骤。如果选区宽 800 像素,输出就是 800 像素宽。社交媒体平台预设（Instagram 1080×1080、YouTube 1280×720）只有在源图像包含足够像素填充选区时,才会以这些尺寸交付。
EXIF 元数据移除及丢失的内容
每次导出都会移除 EXIF、IPTC、XMP 和 ICC 配置文件数据。这发生在画布管线层级:浏览器将解码后的图像像素绘制到 HTMLCanvasElement,然后画布编码为新文件。画布没有元数据容器概念,只存储像素值和编码参数。被移除的内容包括 GPS 坐标、相机品牌和型号、镜头焦距、曝光设置、版权字段和颜色配置文件标签。sRGB 颜色配置文件实际上是画布做出的假设:颜色通过浏览器显示管线渲染并重新编码,不附加任何配置文件。对大多数 Web 发布和社交媒体用途而言,移除 EXIF 是首选,因为 GPS 数据可能暴露用户无意分享的位置信息。对于颜色配置文件准确性至关重要的专业摄影工作流,请注意 ICC 配置文件保真度未保留,交付印刷或出版应使用颜色管理导出工具。
如何为微信、微博、小红书裁剪图片
国内主流社交平台都有各自的最佳图片比例。微信朋友圈单图在 3:2 或 1:1 显示效果最好,多图通常会被强制裁切为 1:1 缩略图,因此建议直接以 1:1 上传。微博主图在 3:2 横版表现稳定,九宫格则一律采用 1:1。小红书首图最常用 3:4 竖图,这是该平台的视觉默认值,1:1 也可接受。抖音和快手的封面图均为 9:16 竖屏。视频号封面为 16:9 横屏。本工具的比例预设涵盖大部分场景,对于其他平台可使用宽高输入框设定精确像素。例如某平台要求 1242×1656,直接键入数值即可。所有处理在浏览器内完成,不会将您的图片上传至任何国内或海外服务器。
AVIF 输出的性能特征
AVIF 导出使用 @jsquash/avif 2.1.1,默认质量设置为 0.9。编码器在 WASM 中运行,首次加载为 870 KB。同一会话内第二次及之后调用不会重新下载。它与 Convert 工具共享同一个块。在 Chromium 系浏览器中,热启动后的编码大约 250 毫秒,但在 Firefox 上,同样的图片大约慢 4 倍（与 Convert 工具的 E2E 验证相同的趋势,docs/research/convert-e2e-2026-05-16.md）。对于 4000 像素宽的照片等大输入,首次编码可能耗时几秒。如果不需要 AVIF,PNG 或 WebP 更快。如果需要相同画质下最小的文件,AVIF 是合适选择。
键盘无障碍访问与移动端触控
cropperjs v2 选区元素将键盘导航实现为其 Web Component 规范的一部分。当您 Tab 到裁剪选区后,方向键以每次按下一个像素的步长移动选框。Shift 加方向键则一次移动十个像素。这是原生可访问的,无需屏幕阅读器变通方案或自定义 JavaScript 覆盖层:键盘处理器位于选区元素的 shadow root 内部,在 keydown 事件时触发。对于依赖纯键盘导航的用户、包括某些辅助技术设置、运动无障碍设备,以及触控板无法可靠实现亚像素对齐的精密工作流,这一点非常重要。附加到选区的实时像素数值也随每次按键更新,因此带 aria-live 区域的屏幕阅读器用户可以听到当前尺寸的变化。键盘无障碍是本工具领先 iLoveIMG 和 img2go 的一个领域,后两者均未实现方向键裁剪导航（2026-05-17 竞品审计验证）。