图片裁剪 - 按比例或自由裁剪并旋转翻转（本地处理）

裁头像要 1:1，发视频封面要 16:9，证件照有 3:4——比例不对，再好的图也白搭。选个预设比例拖动取景框，或直接填坐标精确裁，旋转翻转顺手就能做；裁剪只是重新取景，不重新压缩，留下的像素和原图一模一样，不会越裁越糊。

口径提醒：比例模式取图内该比例的最大取景框（按像素取整，宽高比与标称值差不到 1%）；自由模式填 x、y、宽、高，超界自动钳回图内；裁剪只改变画面范围、不整体重压缩，保留的像素与原图一致——放大会模糊是缩放的事，裁剪不背这个锅。

这个工具解决你的问题了吗？

使用步骤

选图，选比例口径或切「自由裁剪」。
比例模式选取景位置，自由模式填坐标。
需要时叠加旋转与翻转。
看输出尺寸，点下载保存。

计算原理与示例

怎么按比例裁剪

选图后在「裁剪口径」选比例，比如头像选 1:1、封面选 16:9，工具会在图内取该比例的最大取景框；取景位置可选居中或靠边，结果区先显示裁剪区域和输出尺寸，点下载保存。

自由裁剪的坐标怎么填

切到「自由裁剪」后填 x、y（裁剪框左上角坐标）与宽、高（像素），超出边界的部分会自动钳回图内；适合精确裁掉白边、水印或按固定尺寸出图。

旋转和翻转怎么用

旋转支持 90°、180°、270°，翻转分水平、垂直与双向，可以和裁剪叠加使用：先取裁剪框，再按输出尺寸旋转，结果区直接给出最终宽高。

裁剪会损失画质吗

不会。裁剪只是重新取景后编码，保留的像素与原图一致，不做整体重压缩；细节放大看也与原图相同。放大会模糊是缩放的事，裁剪不背这个锅。

代码示例

JavaScript 裁剪 + 旋转（drawImage 九参版）

// 九参 drawImage：从源图裁一块，画到目标画布的指定位置 —— 裁剪就是它的基本用法
function crop(img, box) {
  const { x, y, width, height } = box;
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  canvas.getContext('2d').drawImage(img, x, y, width, height, 0, 0, width, height);
  return canvas;
}

// 旋转 90 度要同时交换宽高，否则图会被裁掉一半
function rotate90(canvas) {
  const out = document.createElement('canvas');
  out.width = canvas.height;
  out.height = canvas.width;
  const ctx = out.getContext('2d');
  ctx.translate(out.width, 0);
  ctx.rotate(Math.PI / 2);
  ctx.drawImage(canvas, 0, 0);
  return out;
}

Python Pillow 裁剪与旋转

from PIL import Image

img = Image.open('photo.jpg')

# crop 收的是 (left, top, right, bottom)，不是宽高
img.crop((120, 80, 620, 480)).save('cropped.jpg', quality=92)

# 旋转：90 的倍数用 transpose 更快且无重采样损失；任意角度用 rotate(expand=True) 防裁角
img.transpose(Image.ROTATE_90).save('rotated.jpg', quality=92)
img.rotate(15, expand=True).save('tilted.jpg', quality=92)

常见问题

裁剪时图片会上传到服务器吗？

不会。取景框计算与画布导出都在浏览器本地完成，从选图到下载图片都留在本机，证件照、合同截图这类敏感图片可以放心裁。

1:1 裁头像时取景框放在哪里？

默认居中，左右各裁掉同样多；如果主体偏在一侧，可以把取景位置切到靠上、靠下、靠左或靠右，取景框会贴着对应边取最大比例框。

为什么 4:3 的取景框是 426×320 这种零头尺寸？

取景框必须完整落在图片像素以内，工具按像素取整后给出能实现的最大比例框，宽高比与标称值相差不到 1%，肉眼无感。

裁错了能撤销吗？

能。源图始终保留在页面里，改参数立即重新出框，或点「重置」回到默认值；你电脑上的原文件也没动过，随时可以重来。

支持哪些图片格式？

PNG、JPG、GIF、BMP、WebP 都能识别并裁剪；GIF 动图裁剪后输出为静态图，需要保留动画请直接用原图。

能批量裁剪多张图吗？

当前版本一次一张，裁完换图即可连续操作，比例与旋转设置会保留；批量队列在规划中，高频需要欢迎在页面里反馈。

裁剪和尺寸调整工具怎么分工？

裁剪改变画面范围（保留哪些像素），缩放改变整体尺寸（像素重采样）。先在这里裁好构图，再去图片压缩或尺寸调整工具里改大小，画质最可控。

延伸阅读

九宫格切图与拼长图：朋友圈两张图怎么出

来自本站原创文章，讲清这个工具背后的算法与口径。