跳到主要内容
酷算
工具类

在线图片裁剪工具·自由比例与固定比例裁切

本地处理 · 文件不上传

在线图片裁剪工具，支持自由裁剪与 1:1、4:3、16:9、3:4、9:16 固定比例，拖拽框选或精确数值输入，全本地 Canvas 处理保留 PNG 透明度，无需上传。

工具介绍

在浏览器里本地裁剪 JPG、PNG、WebP 图片，可选自由比例或 1:1、4:3、16:9、3:4、9:16 五种常见固定比例。支持拖拽选区与数值精确输入，PNG 透明背景全程保留，所有处理都在 Canvas 中完成，文件不会上传到服务器。

使用方法

  1. 点击「选择图片」上传 JPG / PNG / WebP（≤ 8000×8000 px）
  2. 在「裁剪比例」选择自由或 1:1 / 4:3 / 16:9 / 3:4 / 9:16
  3. 拖动预览中的绿色裁剪框，或直接在右侧数值框微调起点与宽高
  4. 选择输出格式（推荐 auto，跟随源格式以保留 PNG 透明）
  5. 点击「裁剪并预览」，确认无误后点击「下载」保存到本地

计算公式

裁剪映射: ctx.drawImage(source, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight); 固定比例联动: cropHeight = cropWidth / aspectRatio (例如 16:9 时 ratio=16/9); 边界 clamp: cropX + cropWidth ≤ imageWidth, cropY + cropHeight ≤ imageHeight; PNG 透明保留: 输出 image/png 时不调用 fillStyle 填充背景

常见场景

证件照 1:1 裁剪

上传一张半身照，比例选 1:1，拖动绿色框对齐头部居中，宽高自动联动为正方形（如 600×600 px），导出 JPG 直接用于校园卡、社保卡、各类系统头像上传。

16:9 视频封面

把竖向手机照裁成 B 站 / 抖音视频封面，比例选 16:9，输入 cropWidth=1920，高度自动联动 1080，输出 JPG（quality 92）单张约 200-400KB，适配常见封面尺寸。

3:4 / 9:16 移动竖图

电商详情页或小红书笔记常用 3:4，朋友圈 / 抖音直播间常用 9:16，选好比例后框会居中重置，原图横向时自动以高度为基准反推宽度，避免越界。

常见问题

我的图片会上传到服务器吗？

不会。本工具完全在浏览器本地运行，文件通过 FileReader 读到内存，再用 Canvas 解码与重新编码，整个过程没有任何 fetch / XHR 上传请求。关闭页面后所有数据随浏览器内存释放。

支持哪些图片格式输入和输出？

输入支持 JPG、PNG、WebP，以及大多数浏览器原生可解码的格式（GIF、BMP）。输出可选 auto（跟随源格式）、JPG、PNG、WebP。HEIC / HEIF 浏览器无法直接解码，请先用图片格式转换工具转成 JPG/PNG 再来裁剪。

PNG 透明背景裁剪后还能保留吗？

可以。当输出格式选 auto（源是 PNG）或显式选 PNG 时，工具不会用白色填充画布，alpha 通道完整保留。如果你选 JPG 输出，由于 JPG 不支持透明，原本透明的像素会被自动填充为白色。

固定比例裁剪和自由裁剪有什么区别，应该怎么选？

自由裁剪宽高任意，适合素材整理、二次编辑；固定比例裁剪锁定 width / height 比值，适合证件照（1:1）、视频封面（16:9）、竖屏内容（9:16）等明确尺寸要求的场景。切换比例时裁剪框会自动居中重置，避免你手动算尺寸。

证件照常用的尺寸比例是多少，如何裁剪？

中国大陆常见的一寸照、二寸照、社保卡照都是 1:1 或近似 1:1，护照与签证多为 35×45mm（约 7:9，可用自由模式精确输入）。建议选 1:1 比例对齐头部居中，cropWidth 设为 600 / 800 / 1200 等常见整数，导出 JPG 体积小且兼容性最好。

手机上能用吗，触屏拖拽是否流畅？

可以。绿色裁剪框已同时绑定鼠标和触屏事件 (touchstart / touchmove / touchend)，在 iOS Safari 与 Android Chrome 上都能稳定拖动，不会触发页面滚动。也可以用底部数值框输入精确像素值，避免手指误差。

可以裁剪的最大图片尺寸是多少？

单图最大支持 8000×8000 px，约等于 6400 万像素 / 大多数手机和单反的最高分辨率。超过此限制会提示「图片过大」，建议先用图片压缩工具把尺寸缩到 4000-6000 px 再裁剪，避免浏览器显存吃紧导致页面卡顿。

相关工具