GIF 叠加 — 图片与 GIF 多层合成
作者 Calvin Sun
将 GIF 叠到静图、静图叠到 GIF,或 GIF 叠 GIF;支持多图层大小、位置、旋转、透明度、起止时间与裁剪,全部在浏览器本地处理。
背景(图片或 GIF)
点击选择背景 PNG、JPG、WebP 或 GIF
或将文件拖放到此处
也可从剪贴板粘贴图片
支持透明 PNG、JPG、WebP 与动态 GIF。
文件仅在本机处理,不会上传。
GIF 叠加指南
使用 OmniGIF Overlay,无需桌面软件即可叠加静图与动画:
- 上传背景 PNG、JPG、WebP 或 GIF。
- 添加一个或多个叠加层(静图或动画)。
- 选择画布尺寸(背景或前景)与输出时长。
- 调整各层大小、位置、旋转、透明度、时间与可选源裁剪。
- 生成并下载合成 GIF——全程本地处理。
多层叠加适合贴纸、画中画 GIF,以及在照片上叠加品牌动态。
Canvas 2D API 可通过 globalAlpha、变换与 globalCompositeOperation 合成图像。MDN Web Docs
叠加时间控制帮助背景与前景保持同步:
- 画布可跟随背景或前景素材的原始分辨率
- 输出时长可跟随背景、最长片段或自定义长度
- 较短素材可按时间取模循环,或定格末帧
- 每层可设置起止时间,在区间外隐藏叠加
这些选项覆盖 GIF 叠照片、照片叠 GIF,以及双 GIF 画中画,无需强制相同片长。
GIF 动画时序由每帧 Graphic Control Extension 的 delay 控制。W3C GIF89a
OmniGIF 上常见的叠加场景:
- 在产品图上放置动态贴纸
- 仅在 GIF 后半段显示 Logo 角标
- 画中画:小反应 GIF 叠在主片段上
- 多层透明 PNG 以不同透明度叠加
本地合成适合草稿与不便上传的私密素材。
用户选择的 File 对象可在浏览器内通过 FileReader 或 URL.createObjectURL 完整读取。MDN Web Docs
OmniGIF Overlay 与其他工具一样采用本地处理:
- 背景与叠加文件不会上传到 OmniGIF 服务器
- 分析事件不包含文件名或像素数据
- 导出不会添加 OmniGIF 水印
无法将媒体送到远程编码器时,优先使用本地叠加工具。
URL.createObjectURL 可让网页应用显示本地文件而无需上传。MDN Web Docs
GIF 叠加常见问题
可以。背景上传 PNG、JPG 或 WebP,再添加动态 GIF 作为叠加层。输出时长可跟随 GIF 或自定义。
可以。背景使用动态 GIF,再添加 PNG/JPG/WebP 叠加层,并调整透明度、位置、旋转与起止时间。
会。每个动画层独立取样。较短素材可循环,或定格在最后一帧,直到输出结束。
「跟随背景」保持背景像素尺寸;「跟随前景」使用选中(或第一层)叠加素材的原始尺寸,并将背景缩放铺满画布。
不会。OmniGIF 使用浏览器 Canvas API 本地合成,文件不会离开你的设备。