图片裁剪

什么是图片裁剪？#

裁剪听起来是图像操作里最简单的一步——留一个矩形，其余扔掉。可一旦要做到位，一堆问题马上冒出来：要不要锁成头像或横幅那种固定比例、能不能先把歪了的地平线转正、导出后体积还上不上得去、以及最关键的——这过程会不会把图传到服务器？本页就是一个在浏览器里把这几件事一次性做完的裁剪工作台。

把图片拖进来，在画面上画一个选框（或者拽选框八个手柄里的任意一个来缩放），需要的话先把整张图旋转或翻转一下，再把选框锁成 1:1、16:9 之类的比例，最后把裁出来的区域导出成 PNG、JPEG 或 WebP，质量由你定。全部用浏览器内的 Canvas API 完成——原图在本地读取，结果在本地重新编码，全程不上传。

怎么使用#

1. 把图片拖到虚线 拖放区（或者点一下它选文件）。编辑器随即出现，替换掉拖放区。
2. 在预览上方的工具条里，先对整张画面做变换：
   • 旋转 每点一次顺时针转 90°。选框跟踪的是旋转后的坐标系，所以怎么转都对得上。
   • 水平翻转 / 垂直翻转 把画面横向或纵向镜像。
3. 从下拉里选 宽高比：自由（任意拖矩形）、1:1（头像/正方形）、4:3、16:9（壁纸/视频封面）。锁比例后，选框会保持这个形状——角手柄会”包住”你的光标往大了长，边手柄则只动你拽的那条轴、另一条按比例算出来。
4. 拖选框主体可移动；拽八个手柄中任一个可缩放。鼠标和触屏都支持。
5. 在预览下方设置导出参数：
   • 格式 —— JPEG（最小、有损）、WebP（小、现代）或 PNG（无损；因为 PNG 没有质量这个概念，质量滑块会自动禁用）。
   • 最大边长 —— 填一个像素数，裁剪结果的长边会被压到这个值且保持比例不变。填 0 表示保留原始裁剪分辨率。
   • 质量 —— 5–100，仅 JPEG 和 WebP 生效。92 是稳妥的默认值；做缩略图时调到 80。
6. 留意 下载 按钮旁边的读数：它同时显示选区尺寸和最终输出尺寸，比如选了 1:1 又压到 800 时会显示 1500×1500 → 800×800。
7. 点 下载 保存。点 重置 把选框恢复到居中默认状态。

主要特性#

• 比例锁定下手感不别扭。 角手柄往两个方向长以”够到”光标，边手柄只改你拽的轴、另一轴按比例推算，绝不会把图意外拉伸变形。
• 选框跟着变换走。 旋转和翻转只往一张离屏画布上施加一次，裁剪框就活在这个变换后的空间里，所以你选中的就是你导出的，预览和输出不会错位。
• 三种格式，质量语义诚实。 PNG 被标成无损并直接禁用滑块，而不是装作在调质量；JPEG 和 WebP 则把真实的质量值原样喂给编码器。
• 可选的输出尺寸上限。 填一个最大边长，裁剪结果就按比例缩小——做头像、OG 图、卡上传限制都方便，省得自己算尺寸。
• 实时前后读数。 选区尺寸和最终输出尺寸并排显示，改比例或加上限之前，效果你看得见。
• 100% 本地。 浏览器解码、浏览器再编码，没有上传通道。

实例演示#

你手头有一张 4000×3000 的横构图风景照，需要做一张 16:9、长边 1280px 的横幅缩略图。把图载入，宽高比 选 16:9，把选框拖到地平线附近。由于锁了比例，选框自动吸成 16:9 的矩形；假设最后落在源图 4000×2250 的区域。接着在 最大边长 里填 1280，读数立刻变成：

选区  4000 × 2250  →  1280 × 720

格式 选 JPEG，质量 保持 92，点 下载。你拿到一张 1280×720 的 JPEG——视画面内容大约 180–280 KiB，相比原图好几兆的体积只是零头，比例正好是横幅要的 16:9、不用加黑边。同一套流程换成 1:1、最大边长 512，就出来一张能直接上传的正方形头像。

常见问题#

选框小到一定程度就缩不动了，为什么？#

设了一个 8 像素的最小边长，目的是让手柄始终抓得住、导出结果不会变成一条几乎看不见的缝。如果你真要极窄的裁剪，别把图放那么大再裁，而是裁一个大一些的区域、然后用 最大边长 缩下去。

锁了 16:9，可拖到边附近时选框尺寸变了。#

那是边界限制在保证选框完整落在画面里。锁比例的选框一旦会越过边缘，工具会缩短较短的边、让比例在剩余空间里活下来。先把选框往中间挪一挪，再缩放。

到底导出 JPEG 还是 WebP？#

同样质量下 WebP 通常比 JPEG 小 25–35%，现在主流浏览器全支持。只有当下游某条老旧流水线不认 WebP 时才退回 JPEG。如果裁的是 logo、UI 截图这种边缘锐利、大块纯色的图，怕有损压缩弄出噪点，就用 PNG。

裁剪能减小体积吗？#

能，但要分两块看：裁掉的部分少了像素、最大边长 还能再缩小一次。但如果你把质量开到 100，一张噪点很多的照片裁出来 200×200 的小块，未必比整张图开质量 80 更小——质量 滑块才是控制有损体积真正的那个手柄。