Question

我希望得到一些关于使用优秀libgif.js library的帮助或指导。

我的目标是拍摄一个带有GIF动画和png文本且透明背景的页面，然后显示2个图像重叠，以便将生成的图像复制到剪贴板。

我在doing this with a static image as a template
但是，如果我尝试这个with a gif，它会将动画gif与文本图像合并，但会冻结gif。

我已熟悉libgif.js库并拥有succeeded in using it to build a canvas from an animated gif and have it remain animated。

但是，文本图像没有显示在最终的画布中，而且我对如何解决这个问题感到有点迷失。

为什么textImage的大小合适且（有些）显然放在画布上，但最终结果中没有显示？

作为一个附带问题，有没有人知道为什么进度条最初快速完成然后再次进展得更慢？

HTML相当长，但JSFiddle中的JS如下所示（对于那些不愿意点击链接的人）。

function doit() {
  var isGIF = true; // always true for now TODO: better way to test if-gif than regex for ".gif"
  var previewContainer = document.getElementById("previewContainer");
  var textImage = document.getElementById("textImage");
  var templateImage = document.getElementById("templateImage");
  var w = document.getElementById("templateImage").width;
  var h = document.getElementById("templateImage").height;

  previewContainer.removeChild(previewContainer.children[1]);

  if (isGIF) {
    var gif = new SuperGif({
      gif: templateImage,
      progressbar_height: 5,
      auto_play: true,
      loop_mode: true,
      draw_while_loading: true
    });

    gif.load();
    var canvas = gif.get_canvas();
    var context = canvas.getContext('2d');
    context.drawImage(textImage, 0, 0, w, h);

    previewContainer.replaceChild(canvas, previewContainer.children[0]);
  }
}

注意：此解决方案最初基于来自this question的this JSFiddle评论中的Arend解决方案。

Answer 1

您必须调整库才能访问其渲染循环（如 frame_rendered 事件）。
通过这种方式，您可以在每帧的图像库中添加所需的任何内容。

但是因为我懒得去那里，所以这是一个解决方法：

除了在文档中附加库返回的画布外，您可以将其保留在屏幕外，并将其绘制在另一个可见的画布上。
在这个新的画布上，您还将在rAF循环中绘制textImage。

＆＃13;

function doit() {
  var previewContainer = document.getElementById("previewContainer");
  var textImage = document.getElementById("textImage");
  var templateImage = document.getElementById("templateImage");
  var w = templateImage.width;
  var h = templateImage.height;
  previewContainer.removeChild(previewContainer.children[1]);

  var gif = new SuperGif({
    gif: templateImage,
    progressbar_height: 5,
    auto_play: true,
    loop_mode: true,
    draw_while_loading: true
  });

  gif.load();

  var gif_canvas = gif.get_canvas(); // the lib canvas
  // a copy of this canvas which will be appended to the doc
  var canvas = gif_canvas.cloneNode();
  var context = canvas.getContext('2d');

  function anim(t) { // our animation loop
    context.clearRect(0,0,canvas.width,canvas.height); // in case of transparency ?
    context.drawImage(gif_canvas, 0, 0); // draw the gif frame
    context.drawImage(textImage, 0, 0, w, h); // then the text
    requestAnimationFrame(anim);
  };
  anim();

  previewContainer.replaceChild(canvas, previewContainer.children[0]);
}

＆＃13;

<script src="https://cdn.rawgit.com/buzzfeed/libgif-js/master/libgif.js"></script>
<div>
  <input type="submit" id="doit" value="Do it!" onclick="doit()" />
</div>
<div id="previewContainer">
  <img id="templateImage" src="https://i.imgur.com/chWt4Yg.gif" />
  <img id="textImage" src="https://i.stack.imgur.com/CmErq.png" />
</div>

＆＃13;

使用`jsgif`在动画GIF上构建图层

1 个答案: