如何修复通过 Konva.js 和 Gifler 加载时 gif 动画的故障？

Question

我按照文档中的示例加载了 gif 动画。但是跳帧，帧显示不正确。

许多 gif 文件都会出现这种情况。请问，怎么解决，有人知道吗？

这是一个错误示例：

 var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      var canvas = document.createElement('canvas');
      // use external library to parse and draw gif animation
      function onDrawFrame(ctx, frame) {
        // update canvas size
        canvas.width = frame.width;
        canvas.height = frame.height;
        // update canvas that we are using for Konva.Image
        ctx.drawImage(frame.buffer, 0, 0);
        // redraw the layer
        layer.draw();
      }

      gifler('https://i.gifer.com/8RDg.gif').frames(canvas, onDrawFrame);

      // draw resulted canvas into the stage as Konva.Image
      var image = new Konva.Image({
        image: canvas
      });
      layer.add(image);

<script src="https://unpkg.com/konva@4.0.4/konva.min.js"></script>
    <script src="https://unpkg.com/gifler@0.1.0/gifler.min.js"></script>
<div id="container"></div>

Answer 1

您必须尝试使用其他库。我用 libgif.js 来解决这个问题，这是一个例子

  var width = window.innerWidth;
  var height = window.innerHeight;

  var templateImage = new Image();

  templateImage.onload = function(){
    // image  has been loaded
    drawKonva(templateImage);
  };

  templateImage.src = "https://i.gifer.com/8RDg.gif";

函数 drawKonva(templateImage) {

  var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height,
  });

  var layer = new Konva.Layer();
  stage.add(layer);

  var gif = new SuperGif({
    gif: templateImage,
    progressbar_height: 0,
    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
      layer.draw();
      requestAnimationFrame(anim);

  };

  anim();

  // draw resulted canvas into the stage as Konva.Image
  var image = new Konva.Image({
    image: canvas,
    draggable: true
  });
  layer.add(image);

}

如何修复通过 Konva.js 和 Gifler 加载时 gif 动画的故障？

How to fix glitch with gif animation when loading through Konva.js and Gifler?

html

javascript

animated-gif

konvajs