浏览器端图片裁剪的工作原理
裁剪过程完全在你的浏览器标签页中使用 Canvas API 运行。无需服务端处理、无需上传、无需第三方服务。每一步都在你的设备上完成。
- 将图片加载到
<img>元素，让浏览器在本地解码。画布叠加层将图片缩放以适应视口，同时一个可拖动的选择矩形显示当前裁剪区域。 - 通过拖动矩形边角来调整裁剪区域。矩形始终被限制在图片边界内，因此不会选中图片以外的区域。当固定宽高比生效时（1:1、16:9、4:3），调整大小会自动保持该比例。
- 像素读数在你拖动时实时更新，以图片像素坐标显示当前的裁剪宽度、高度、X 和 Y 位置。这让你无需猜测即可定位精确尺寸。
- 点击「裁剪并下载」时，页面从源图片中仅提取所选区域绘制到离屏画布上保持原始像素分辨率，然后通过
canvas.toBlob()以源文件相同的格式导出结果，并生成用于下载的 Blob URL。
为什么要在线裁剪图片？
- 裁剪可以去除不需要的边缘、空白区域或视觉杂乱。一次简单的裁剪往往比任何滤镜或色彩调整更能改善照片构图。
- 宽高比控制对于发布平台至关重要。社交媒体信息流期望 1:1 用于头像、16:9 用于视频缩略图、4:3 用于标准摄影。裁剪到正确的比例可以避免上传时出现尴尬的黑边或裁切不当。
- 客户端裁剪是缺少图片编辑器的受限公司设备上的唯一选择。由于不上传任何内容，因此没有数据泄露风险，敏感图片也无需合规审查。
- 实时尺寸读数消除了猜测。你可以在拖动时看到像素坐标和选择大小，因此无需切换到像素测量工具即可裁剪到精确的宽度和高度。
常见裁剪应用场景
裁剪是网页发布、社交媒体和软件开发中最常见的图片编辑之一。以下三种模式中浏览器端裁剪器可以节省时间。
- 为在线商店准备产品照片。裁剪为统一的 1:1 或 4:5 宽高比，使每个列表缩略图在网格中对齐。导出保留原始格式，因此 JPEG 产品照片保持为 JPEG。
- 为文档或错误报告裁剪截图。在将图片附加到工单或拉取请求之前，裁剪掉浏览器工具栏、Windows 任务栏或敏感通知。
- 为着陆页裁剪主图或横幅。锁定 16:9 预设，将照片最重要的部分定位在裁剪框中央，并以原始分辨率导出以在 retina 显示屏上获得最佳质量。
实例：将 4000×3000 照片裁剪为 1200×675 的主横幅
数码相机拍摄的 4000×3000 像素照片对于典型的网页主横幅来说太大了。横幅空间可能是 1200×675（一个 16:9 画框）。
将照片拖入上传区域。图片以全分辨率加载，但会缩放以适应视口以便舒适的拖动操作。选择 16:9 宽高比预设。裁剪框立即自动吸附到适合图片的最大 16:9 区域。拖动矩形将焦点——一个山峰、一件产品或一张人脸——定位到画框中。实时读数显示当前选区为 4000×2250（全图 16:9 窗口）。抓住一个角手柄向内拖动，直到宽度读数达到 1200 像素。高度因比例锁定而自动跟随。点击 裁剪并下载。页面从原始像素中提取所选 1200×675 区域，并以源格式输出裁剪后的文件。整个过程只需一两秒，除初始页面加载外不使用任何网络带宽。
支持哪些图片格式裁剪？
本工具接受浏览器可以解码的任何格式：PNG、JPEG 和 WebP 覆盖了几乎所有实际应用场景。裁剪后的输出以源文件相同的格式保存。PNG 保持无损、JPEG 保留原始质量水平、WebP 保持为 WebP。格式通过源文件的 MIME 类型检测。
裁剪会减少图片文件大小吗？
裁剪会移除像素，因此输出文件的大小通常小于源文件，尤其是当你裁剪掉较大的边框或空白区域时。导出使用原始文件格式及其编码参数——PNG 保持无损、JPEG 保留其原始质量设置——因此唯一的节省来自像素减少而非重新压缩。
宽高比预设有什么作用？
预设（1:1、16:9、4:3、3:2、9:16）锁定裁剪框的宽高比。当预设生效时，拖动任何角或边缘手柄会在保持比例不变的同时调整选区大小。切换到自由模式会解除约束，让你可以任意调整矩形大小。比例在图片像素坐标上强制执行，因此导出的输出具有你选择的精确宽高比。
图片会上传到服务器吗？
不会。图片永远不会离开你的设备。页面使用浏览器的 File API 将图片读入内存，并使用 Canvas API 裁剪和导出结果。你可以打开浏览器的 DevTools 网络面板来验证——裁剪过程中唯一的出站请求是初始页面加载和广告调用。没有图像数据传输。
我可以输入精确像素坐标来裁剪特定区域吗？
当前版本通过图片预览上的拖动交互来调整裁剪框。你可以读取选区 X、Y、宽度和高度的实时像素坐标。v1 版本暂不支持直接数值输入裁剪框，但计划在未来的更新中添加此功能。
原始图片会怎样？
原始文件始终保留在你的设备上。页面将其读入浏览器内存用于显示和裁剪，但永远不会修改磁盘上的源文件。裁剪后的输出是一个新文件，需要单独下载。原始文件在你电脑或手机上的原始位置保持不变。
裁剪是否有文件大小限制？
该工具在上传区域设定了每文件 30 MB 的限制，以在低端设备上控制浏览器内存。如果你的图片大于 30 MB，你可以先使用专门的图片调整大小工具进行缩小，然后再加载到这里进行裁剪。
裁剪功能在手机和平板上能用吗？
可以。裁剪手柄的大小考虑了触控目标，交互使用指针事件，支持鼠标点击和手指点击。在手机屏幕上，图片预览会适应可用宽度，控件垂直堆叠以便单手操作。