免费在线图像裁剪器
使用预设长宽比或自定义选择区域裁剪图像。立即下载裁剪结果。
支持 JPEG、PNG、WebP、GIF、BMP、TIFF、AVIF · 最大 50 MB
如何裁剪图像
- 在上方上传或拖放图像。
- 选择长宽比预设,或使用"自由"以获得任意形状。
- 将裁剪选区拖到要保留的区域。使用角部手柄调整大小。
- 点击"裁剪图像"并下载结果。
裁剪简史
裁剪比数字编辑古老一个多世纪。在模拟时代裁剪一张照片是一种物理行为:这意味着要决定在放大灯曝光相片之前在哪里放置一个遮罩、一个放大机刀片或一张卡片。在工作的暗室中,放大机通过镜头将底片投射到平放在底板上的感光纸上,这是一个带有可调节带子的重型金属框架,这些带子重叠在纸张的边缘。将带子向内拉只暴露纸张的较小窗口。对于报纸和杂志的图片编辑来说,工作流程更加物质化:编辑直接使用油性铅笔在底片样张上标记裁剪决定,通常是红色,但有时是蓝色,在每个画面要放大的部分周围画矩形。油性铅笔被偏好,因为它在光滑的相片乳剂上书写而不会涂污。亨利·卡蒂埃-布列松是马格南的标志性人物,著名地拒绝了这一做法,他坚持全画幅打印,并坚持在按下快门的瞬间在取景器内构图,将任何后续裁剪视为对快门的智力欺骗。(他通常被引用的例外是 1932 年的图像圣拉扎尔火车站后,他当时透过栅栏上的洞拍摄,物理上无法靠近以填满画框。)安塞尔·亚当斯站在另一端:他对暗室的精心实践将裁剪视为塑造最终相片的众多工具之一,与加光、减光、对比度过滤和选择性漂白并列。现代图像编辑器中裁剪的工具栏图标,两个直角夹着一个空矩形,是摄影师在底片样张上使用 L 形纸张引导手动框选潜在裁剪的风格化绘图。
常用长宽比
宽高比描述宽度与高度的比例。现代社交平台都有一个或多个「首选」比例,以错误比例上传几乎总是意味着平台将代你裁剪或加黑边,通常很糟糕。一个让你在上传前达到正确比例的裁剪工具正在做有意义的工作。对于生产工作,请对照当前平台文档确认,规格会漂移,但截至 2026 年:
- Instagram,信息流帖子:正方形 1:1 于 1080x1080,纵向 4:5 于 1080x1350(目前参与度最高的静态格式,因为它占用约 25% 更多的垂直屏幕空间),横向 1.91:1 于 1080x566。Stories 和 Reels:9:16 于 1080x1920。个人头像:至少 320x320,显示为圆形。
- Twitter/X,头部 1500x500(3:1,安全内容位于中央 1500x360 区域,左下角在桌面上部分被个人头像覆盖部分遮挡);个人头像最小 400x400(Retina 800x800),显示为圆形;流中图像卡片 1200x675(16:9)用于干净的预览。
- Facebook 和 Open Graph,Facebook、LinkedIn、Slack、Discord 以及大多数其他 OG 元数据消费者的链接预览:1200x630 于 1.91:1。个人头像最小 360x360(720x720 首选);封面照片 820x312 桌面,安全区在中央 640x312。
- LinkedIn,个人资料封面横幅 1584x396(4:1),关键内容在中央 1128x376 内以适应移动裁剪;个人头像 400x400。
- YouTube,视频缩略图 1280x720(16:9),低于 2 MB,重要内容在中央 1100x620 桌面区域(960x540 移动),右下角保留空白,因为 YouTube 在那里放置时长时间戳。频道横幅 2560x1440,有一条更窄的 1546x423 条带在所有设备上都安全。
- TikTok,9:16 于 1080x1920。For You 算法围绕全屏垂直内容优化。
- Pinterest,标准 pin 1000x1500(2:3)。比 1:2.1 更高的 pin 在信息流中被裁剪。
- 印刷(ISO 216 A 系列),1:√2 ≈ 1:1.414。Walter Porstmann 于 1922 年 8 月 18 日的 DIN 476 编纂了该比例(已知最早的建议是 1786 年 10 月 25 日 Lichtenberg 写给 Göttingen 的 Beckmann 的信)。A4 是 210x297 毫米;US Letter 是 8.5x11 英寸(1:1.294),不可互换。
电影比例,宽预设的来源
学院比例(1.375:1,口语上常称为 4:3)。无声电影使用整个 35 毫米画框以大约 4:3 拍摄;当 1920 年代末光学声轨胶片到来时,声轨条侵入了画面区域。美国电影艺术与科学学院于 1932 年 2 月 16 日发布指令,规定新的孔径尺寸,结果是 1.375:1 画框,命名为学院比例,1932 年至 1952 年间几乎每部好莱坞电影都以此格式拍摄。CinemaScope(2.55:1 → 2.35:1 → 2.39:1)。它背后的技术可追溯到 1920 年代,法国发明家 Henri Chrétien 当时为 Hypergonar 变形镜头申请了专利。20 世纪福克斯于 1953 年 1 月 12 日与他签署协议,并于 1953 年 2 月 2 日宣布所有未来的福克斯制作将使用该技术;圣袍千秋于 1953 年 9 月首映,作为第一部商业 CinemaScope 故事片。原始比例为 2.55:1;1956 年纳入声轨时,缩减为 2.35:1;SMPTE 195-1993 确认 2.39:1 为现代标准。美国宽屏平面(1.85:1),环球电影公司于 1953 年 5 月 20 日以Thunder Bay引入;非变形,通过顶部和底部硬遮罩实现。16:9(1.7777...:1)于 1984 年由 SMPTE HDTV 工作组的 Kerns H. Powers 首次提出,他选择它作为当时电影标准之间的几何中点。ITU 于 1990 年采用它作为国际 HDTV 标准;FCC 于 1996 年采用 ATSC;首次 ATSC 广播于 1998 年 10 月 28 日上线。每台现代电视、显示器、笔记本电脑屏幕、YouTube 缩略图和 HDMI 信号在名义上仍为 16:9。
三分之一法则,1797 年的构图规则至今仍在使用
「三分之一法则」一词出现在 John Thomas Smith 于 1797 年出版的Remarks on Rural Scenery中。Smith 是英国雕刻家和古物学家;他的书表面上是关于二十幅小屋蚀刻的集合,附有关于风景如画的文字。顺便提一下,Smith 引用了 Sir Joshua Reynolds 1783 年关于绘画中光与暗平衡的讲座,然后提议将相同的逻辑扩展到「三分之二规则」,创造了几个世纪后将成为业余和专业摄影标准构图启发式的术语。裁剪工具通过在实时裁剪选区上叠加 3x3 网格来表达该规则;将地平线、强垂直(树干、人物)或焦点与四个交叉节点之一对齐是标准建议。除了三分之一,还有几个其他构图辅助已成为严肃裁剪工具的标准叠加:黄金比例(≈1.618:1),有时被描述为更深层的数学灵感,三分之一法则是其简化,其分割线大约位于画框的 0.382 和 0.618 处;斐波那契螺旋来自绘制连续较小的正方形,其边遵循 1、1、2、3、5、8、13...,这是文艺复兴时期绘画构图经常被分析的对象;对角线方法 / 黄金三角形在画框上画一条对角线,从每个对角画一条垂直线,适合具有强烈斜线的场景。此工具目前不渲染这些叠加,这是一个有记录的范围限制和未来工作的诚实机会。
裁剪实际如何发生,Canvas API
HTML Canvas API 自原始 WHATWG canvas 规范以来,一直支持一个执行裁剪几何重任的单一方法:CanvasRenderingContext2D.drawImage()。它有三种重载形式,第三种,九参数形式,是用于裁剪的:drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)。前四个数字参数指定源矩形,即要提取的源图像的子区域。接下来的四个指定 canvas 上应绘制该子区域的目标矩形,如果目标尺寸不同则隐式缩放。要不缩放地裁剪,你将目标 canvas 的尺寸调整为与源矩形完全匹配,并用 dx = 0, dy = 0, dWidth = sWidth, dHeight = sHeight 绘制,这正是此工具所做的。这单一调用是任何基于浏览器的裁剪工具的跳动心脏。一旦像素在 canvas 上,标准导出路径是 canvas.toBlob(),它将 canvas 序列化为选定 MIME 类型(PNG、JPEG、WebP)的 Blob。Canvas API 还公开了一个强大的相邻函数 createImageBitmap(),其 imageOrientation: 'from-image' 选项在将位图返回之前应用 JPEG 中存在的任何 EXIF 方向旋转,没有它,用侧面持握的手机拍摄的照片在 canvas 上会显示为旋转 90°。9 参数 drawImage() 自 2015 年 7 月以来一直作为基线广泛可用,这意味着每个现代使用中的浏览器都支持它。
无损 vs 重新编码:JPEG 警告
对于任何基于浏览器的裁剪工具的一个小但重要的警告:Canvas API 始终光栅化和重新编码。如果你上传 JPEG,将其放到 canvas 上,用 drawImage() 裁剪,并用 toBlob('image/jpeg', 0.92) 导出,你刚刚在原始文件上执行了一个额外的有损 DCT 量化周期。这种现象被称为世代损失,JPEG 对此非常敏感,每次重新保存都会在离散余弦变换系数中引入新的量化误差;色度子采样在保存中复合该效果,色度通道逐渐变得更柔和,颜色边界渗出。Cloudinary 著名的可视化显示了一个重新保存五十次的 JPEG 退化为可识别但明显损坏的自身漫画。标准建议是保留你可能想重新编辑的任何图像的未修改主副本。然而,有一个特殊技巧可以在不重新编码的情况下裁剪 JPEG,前提是满足某些几何约束。JPEG 压缩在 8x8 像素块(或具有色度子采样的 16x16 宏块)上操作。如果裁剪边界恰好落在这些块边缘上,JPEG 规范称之为 iMCU 边界,可以通过重新排列现有的压缩 DCT 系数提取裁剪区域,而无需将它们解码回像素。规范的实现是 jpegtran,Independent JPEG Group 的 libjpeg 附带的命令行实用程序,由 Tom Lane 组织,首次于 1991 年 10 月 7 日发布。Canvas API 没有等价物,基于浏览器的 JPEG 裁剪始终重新编码;工具能做的最好是选择高质量设置(此工具使用 92%,这是保守且视觉上胜任的)。对于 PNG 和 WebP-无损,情况不同:这些格式以确定方式编码像素,因此在相同格式中裁剪后重新保存在裁剪像素上是位完美的。PNG 是任何像素保留比文件大小更重要的裁剪的推荐输出格式,例如,截图或 UI 模型。
触摸和指针事件,为什么手柄必须足够大
在 Pointer Events 规范成熟之前,构建一个在桌面鼠标、触摸屏上的手指和平板电脑上的触控笔上都能正确工作的单一拖动手柄需要同时处理三个事件族。Pointer Events Level 2 于 2019 年 4 月 4 日达到 W3C 推荐状态,将它们统一为一个连贯的事件族,包含 pointerdown、pointermove、pointerup 和暴露底层设备类的 pointerType 属性。对于裁剪工具的面向用户部分,你拖动以调整裁剪选区大小的角手柄,以及你拖动以移动它的中心区域,触摸人体工程学很重要。平台指南趋同于一个相似的数字:Apple Human Interface Guidelines 规定最小命中目标为 44x44 点;Material Design 规定 48x48 dp;WCAG 2.5.5(AAA 级,「目标大小」)要求 44x44 CSS 像素;WCAG 2.5.8(AA 级,「目标大小(最小)」,在 WCAG 2.2 中添加)要求最小 24x24 CSS 像素,有间距例外。实际含义:画为微小 8x8 像素正方形的角手柄在手机上很难抓住。可见装饰可以保持小,但底层命中区域应通过透明填充扩展,使有效目标至少达到 WCAG AA 的 24x24 阈值,理想情况下达到 AAA / Apple 指南的 44x44。
库的全景,以及为什么此工具不使用其中任何一个
主导的开源客户端裁剪库是 Chen Fengyuan 的 Cropper.js,MIT 许可,截至 2026 年初约有 13.8k GitHub 星和约 140 万的每周 npm 下载量。它的功能集很全面:触摸和鼠标、鼠标滚轮和捏合缩放、自由旋转、水平和垂直翻转、多种宽高比模式、固定裁剪框内的可移动图像和丰富的事件钩子。Dominic Tobias 的 react-image-crop 是一个精简的 React 特定组件,ISC 许可,gzip 压缩后不到 5 KB。PQINA 的 Pintura 是一个商业 JavaScript 图像编辑器,包括裁剪以及调整大小、旋转、过滤器、注释、贴纸、水印和编辑工具,以约每月 13 美元至 317 美元的订阅级别出售,被包括 Dropbox、Square 和 ConvertKit 在内的公司使用。Jonas Wagner(2014)的 smartcrop.js 是一种内容感知裁剪算法,使用图像处理启发式(颜色饱和度、边缘检测)自动找到美学上合理的裁剪,而不是等待用户输入。此工具有意不使用任何这些,它是一个小型、单一用途、无框架的实现。它不试图在功能广度上与 Cropper.js 竞争;它针对单次访问、单张图像、单次裁剪、单次下载进行了调整,无上传、无账户、无从 CDN 拉取的脚本标签。
隐私:为什么仅浏览器在这里重要
服务器端裁剪器(iLoveIMG、Adobe Express、Canva 和大多数「在线图像裁剪器」网站)需要将你的图像上传到第三方服务器。iLoveIMG 记录了两小时的删除策略;Adobe Express 和 Canva 有类似但可变的条款。即使有最严格的删除,上传本身也是一个可以被记录、拦截或泄露的网络事件。对于普通的假期照片,这没问题。对于带有 EXIF GPS 元数据的个人照片、包含 PII 的文档扫描(护照页、身份证、税务文档、保险表格)、内部工作 UI 的截图、医学成像或你不希望被复制到陌生人硬盘上的任何其他内容,「图像留在我的设备上」是唯一安全的架构。此工具通过 JavaScript 在浏览器中本地运行整个裁剪管道,文件选择、解码、canvas 裁剪、重新编码、下载。无上传,无 API 调用,无日志条目。你可以通过在裁剪时打开 DevTools 的 Network 标签来验证:没有携带图像数据的出站请求。更好的是,在页面加载后将其离线(飞行模式),并确认裁剪器仍然工作,这是没有任何东西被上传的最强经验证明。
常见问题
裁剪会降低图像质量吗?
不会。裁剪会以原始分辨率提取所选区域。唯一影响质量的是输出格式 · JPEG 使用高质量设置 (92%) 以尽量减少伪影。
我可以裁剪到精确的像素尺寸吗?
裁剪选区会实时显示像素尺寸。如需精确像素大小,请在裁剪后使用我们的 Image Resizer 工具将结果缩放到精确尺寸。
我的图像会被上传到任何地方吗?
不会。所有裁剪都在您的浏览器中使用 Canvas API 完成。您的图像始终保留在您的设备上。
我应该选择哪个宽高比?
匹配目标平台。Instagram 信息流参与度偏爱纵向 4:5(5:4 垂直,1080x1350)而不是正方形 1:1;YouTube 缩略图是 16:9(1280x720);TikTok 和 Instagram Stories/Reels 是 9:16 垂直(1080x1920);通过 Open Graph 的 Facebook/LinkedIn 链接预览是 1.91:1(1200x630);Pinterest 标准 pin 是 2:3(1000x1500)。对于打印,A 系列纸是 1:√2(≈1:1.414);35 毫米胶卷和大多数 DSLR 传感器是 3:2;iPad 和较旧的 4:3 照片是 4:3。如果你为艺术而不是特定平台裁剪,请使用「自由」。
我的图像会被上传到任何地方吗?
不会。所有处理,文件选择、解码、裁剪选择、canvas 重新编码、下载,都通过 JavaScript 和 HTML Canvas API 在你的浏览器中本地发生。没有图像被发送到服务器,没有 API 调用,没有日志条目被创建。你可以在裁剪时在 DevTools 的 Network 标签中验证,或在页面加载后将其离线,并确认裁剪器仍然工作。对于带有嵌入 GPS 的个人照片、包含 PII 的文档扫描、内部工作 UI 的截图或你不希望被复制到陌生人硬盘上的任何图像都很安全。
裁剪会剥离 EXIF 元数据吗?
是的,作为副作用。Canvas API 只存储像素数据,因此 EXIF、IPTC 和 XMP 元数据块(相机型号、曝光设置、GPS 坐标、版权标签)不会在往返中存活,它们从裁剪的输出中消失。当你将裁剪的图像分享到不会在上传时剥离 EXIF 的论坛或聊天应用时,这是一个隐私胜利。如果你需要保留元数据(摄影师存档曝光数据、需要版权标签的内容工作流程),这是错误的工具,请使用 ImageMagick 的 convert 或专用的 EXIF 感知库,该库明确保留元数据。