如何将两个动画 gif 与 javascript 合并？

Posted 2023-03-25

【中文标题】如何将两个动画 gif 与 javascript 合并？

【英文标题】：How to merge two animated gif with javascript?

【发布时间】：2020-07-01 04:31:33

【问题描述】：

我有一个允许用户上传动画 GIF 的网络应用程序。 gif 使用<img> 标签显示在同一页面上，用户可以在页面中移动它们。当用户完成移动 gif 时，我需要将结果导出到一个包含所有这些的 gif 中。

例如，用户可能会上传两个动画 gif 文件并将它们并排放置在网页上，我需要将它们导出到一个 gif 文件中并排显示两个 gif。

我正在考虑从每个上传的 gif 中提取所有帧，将每个 gif 中的帧组合成一个帧（如 result_frame_1 = gif1_frame_1 + gif2_frame1、result_frame_2 = gif1_frame_2 + gif2_frame2 等）并重新排列生成的帧以获得新的gif。

我需要使用 javascript 来执行此操作，是否有库可以帮助我完成此任务？基本上我需要一个库来从 gif 中提取帧，对其进行操作并从中重新创建 gif。

【问题讨论】：

据我所知，你不能用 javascript 做到这一点。您所依赖的图像显示体现在网络浏览器软件中，不会暴露给您。

您可以使用canvasContext.drawImage 将图像放在一个元素中后，将它们放在画布上。然后您可以通过XMLHttpRequest 在FormDataInstance.append('fileName.png', blob) 中发送const blob = canvas.toBlob()，然后在您的服务器上写入文件，但我只会将图像网址发送到服务器（通过 XMLHttpRequest），您可以在其中在服务器上获取并合并它们。

【参考方案1】：

目前没有这方面的库。但是您可以使用 ffmpg wasm 从 gif 或任何其他帧提取器中提取帧。将这些帧传递给画布 imagedraw。图像的所有结果帧形成一个新的 gif。