拖入 GIF 进行裁剪
关于 GIF 裁剪工具
GIF 裁剪工具在浏览器里按自由或固定比例剪裁动图，去除多余边距、聚焦关键画面，而不必先转成静态再拼接。处理流程用 gif.js 解码器把动图拆成逐帧 bitmap，再用 Canvas 2D API 按所选矩形区域逐帧裁切并重新编码为 GIF89a，因此每帧的延迟信息、播放速度和透明背景都会被保留。你可以拖拽选框并实时预览裁剪后的循环效果。几个实用经验：裁剪只截取每帧的指定区域，不重新量化颜色、不压缩，画质与原始一致；先想好目标比例（如 1:1 方形或 9:16 竖版）再拖选，比后期二次缩放更省事。处理用 WebAssembly 在本地完成，文件不会上传到服务器，比在线工具更保护隐私。适合为表情包、教程动图或社交媒体片段做尺寸精简，让 GIF 更小更易分享，同时保留动画质感；裁剪后还能再配合本站图片压缩进一步减小体积，让动图在网页里加载更快。
裁剪必须对所有帧施加同一区域，这是动图与静态图最本质的差别。若逐帧按各自内容对齐，帧与帧之间的相对位置会漂移，播放时出现抖动；而裁剪框在整段素材里保持固定，才能保住原始运动关系。因此确定裁剪区域时应结合全部帧一起预览，而不是只看第一帧。
裁剪会改变帧间差分的有效性，进而影响体积。原本只有小范围变化的素材，裁剪后若把变化区域切到边缘或切掉参照物，差分可能失效，体积反而增大。因此裁剪后应对比一下前后体积，若明显变大，说明裁剪破坏了原有编码结构，需要重新考虑区域选择。
透明区域在裁剪后往往需要重新填充。原本靠画布边缘之外容纳的部分被裁掉后，留下的透明区会成为可见的空白，播放时呈现为闪烁或半透明的色块。处理含透明通道的素材时，应确认裁剪结果是否需要用靠近边缘的颜色补齐，而不是直接留空。
调色板在裁剪后可能需要重算，这一步取决于实现。若工具按新画面重新统计颜色分布，色彩可能比裁剪前更准；若沿用旧调色板，则可能出现新的色带。因此裁剪后应放大检查渐变与阴影区域，确认没有因为颜色重新映射而产生断层。
最后，循环与延迟等元数据需要一并保留。裁剪只改变画面尺寸，不应当改变播放节奏；但部分工具在重新编码时会重置循环次数或延迟值。导出后应在实际环境里播放一次，确认节奏与裁剪前一致，而不是只检查首帧画面是否正确。
面向社交平台发布时，尺寸还需要匹配目标场景的比例。方形信息流、竖向短视频与横向宽幅对同一段素材的构图要求完全不同，把一段横向画面直接裁成竖版往往会切掉主体。与其反复裁剪，不如先确认目标比例，再回到源头调整取景，这样一次就能得到可复用的素材而不是若干版本的边角料。
批量裁剪时参数一致性比单张完美更重要。同一批素材若每张都按内容微调，拼在一起播放会显得参差；而统一裁剪框虽然个别画面留白稍多，整体观感更整齐。因此批量处理应先定一套统一参数（尺寸、比例、留白规则）再执行，把例外单独列出处理，而不是在里面逐张微调。
实现原理
裁剪只改变可视区域，不重新编码未受影响的部分，因此是无损的（前提是输出不再次压缩）。需要注意动图的每一帧都要应用同一裁剪框，否则画面会抖动；此外裁剪可能移除原本用于压缩的相同区域，导致体积反而上升，因为帧间差分变小了。
把动图裁掉四周 20%逐帧应用同一裁剪框；若原图大片静态区域被裁掉，帧间差异上升，体积可能不降反增本页实测数据
| 修复：worker 依赖外部 CDN | 旧实现的 gif.js worker 指向 cdnjs.cloudflare.com 的脚本——离线、内网或被墙时渲染永不结束，页面一直停在「裁剪中…」；也会向第三方发起请求，与「图片不上传、本地处理」的声明矛盾。现在把 worker 源码用 ?raw 打进 bundle 并在运行时包成 Blob URL（与 pdfjs 的做法一致） |
|---|---|
| 裁剪生效 | 裁 100×60 后结果图实际为 **100×60**，与输入框一致；修复后 1 秒内完成 |
| 帧数保持 | 输出仍是 3 帧（GIF 是单帧裁剪后再打包，帧数不变） |
| 尺寸默认值 | 上传后裁剪框自动设为整图（240×180），不改参数直接裁剪等于重编码 |
这个页面暴露的问题值得单独记一笔：依赖外部 CDN 的 worker 脚本是一个静默的可用性缺陷。它在正常网络下工作得很好（所以很难被测出来），但在内网、离线、或 cdnjs 被墙的地区，用户看到的是「裁剪中…」转圈直到放弃——既不报错也不提示，比崩溃更难诊断。同类问题在本站其他地方也出现过（PDF.js worker 已改为内联），判断标准很简单：核心功能所依赖的脚本不应来自第三方域名。使用上再提醒两点：GIF 是有损的 256 色调色板格式，裁剪后重新编码会让颜色略微劣化；帧延迟沿用原设置，本页不做时间轴调整。
使用方法
- 打开「GIF 裁剪工具」
- 上传图片文件
- 根据需要调整输出选项
- 点击「处理」按钮，结果实时显示
- 复制或导出结果
使用场景
- 去除多余边白 — 裁掉 GIF 动图四周的白边或黑边，使动画内容填满整个画面。
- 截取局部画面 — 从全景 GIF 中裁取局部区域，聚焦展示关键动作或表情。
- 调整构图 — 按特定宽高比裁剪 GIF，适配社交媒体平台的视频尺寸要求。
- 表情包裁剪 — 将横版 GIF 裁剪为方形或竖版，适配微信表情包的尺寸规范。
- 去除水印区域 — 裁掉 GIF 边角的水印区域，保留干净的动画主体内容。
常见问题
裁剪后动画会丢失帧吗？
不会。工具逐帧裁剪并保留原始的帧延迟信息，裁剪后的 GIF 帧数和播放速度与原始一致。
裁剪区域怎么设定？
通过可视化拖拽选框设定裁剪区域，也可直接输入精确的 x、y、宽度、高度像素值进行裁剪。
裁剪后 GIF 质量会下降吗？
不会。裁剪过程仅截取每帧的指定区域，不进行颜色重新量化或压缩，图像质量与原始一致。
能按特定宽高比裁剪吗？
能。可通过输入特定的宽度和高度值实现按比例裁剪，如 1:1 正方形或 9:16 竖版。
裁剪会保留透明背景吗？
会。GIF 支持透明背景，逐帧裁剪时会保留原有的透明度信息，适合裁掉背景后的动图素材。
文件会被上传吗？
不会。所有解码、裁剪和编码在浏览器本地通过 gif.js 和 Canvas API 完成，文件不离开你的设备。
裁剪 GIF 后动画不动了或只剩一帧？
裁剪区域必须覆盖到所有帧的有效区域；如果只截到变化部分以外的静止区，导出可能退化成单帧。确认选择了完整时间范围、且裁剪框内有实际变化的内容。导出前预览一次，能播放再保存。
GIF 裁剪后边缘有黑边或残影？
GIF 采用帧间差分存储，只记录与上一帧的差异；裁剪后差分基准变了就可能露出上一帧的残影。工具会重算帧，但极端情况下仍有残留。把裁剪框向外扩几像素、或裁剪后再整体压一次色，通常能消掉。