GIF 叠加 — 图片与 GIF 多层合成

作者 Calvin Sun

将 GIF 叠到静图、静图叠到 GIF,或 GIF 叠 GIF;支持多图层大小、位置、旋转、透明度、起止时间与裁剪,全部在浏览器本地处理。

背景(图片或 GIF)

点击选择背景 PNG、JPG、WebP 或 GIF

或将文件拖放到此处

也可从剪贴板粘贴图片

支持透明 PNG、JPG、WebP 与动态 GIF。

文件仅在本机处理,不会上传。

GIF 叠加指南

使用 OmniGIF Overlay,无需桌面软件即可叠加静图与动画:

  1. 上传背景 PNG、JPG、WebP 或 GIF。
  2. 添加一个或多个叠加层(静图或动画)。
  3. 选择画布尺寸(背景或前景)与输出时长。
  4. 调整各层大小、位置、旋转、透明度、时间与可选源裁剪。
  5. 生成并下载合成 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 本地合成,文件不会离开你的设备。

在线 GIF 叠加 – 图片与 GIF 多层合成 | OmniGIF