如何使用 Javascript 将 Gif 转换为 spritesheet

Question

我正在使用 Libgif 从 gif 获取帧。 然后我在 div 中使用 Id = frames 附加这些帧。 然后我正在拍摄这些帧并尝试在画布中一个接一个地添加每个帧以制作精灵表。

最后，我在画布中获得了一个图像，但我没有获得不同的帧，而是在精灵表中获得了相同的图像。 请帮我找出问题。

假设 gif 的帧数不会超过 100，我将画布宽度设为 10000。

c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.clearRect(0, 0, ctx.width, ctx.height);
ctx.beginPath();
var imageGiF = "";
var total = 0;
let canvasWidth = 0;
let canvasHeight = 0;
$('div.gifimage img').each(function(idx, img_tag) {
  var total = 0;
  if (/^.+\.gif$/.test($(img_tag).prop("src"))) {
    var rub = new SuperGif({
      gif: img_tag,
      progressbar_height: 0
    });
    rub.load(function() {
      for (let i = 0; i < rub.get_length(); i++) {
        total += 1;
        rub.move_to(i);
        // var canvas = cloneCanvas(rub.get_canvas());
        var canvas = rub.get_canvas().toDataURL("image/png");
        img = $('<img id = "gifframe' + i + '"src= "' + canvas + '" class= frameimages>');

        $("#frames").append(img);

      }
      var frameimages = document.getElementById("frames").querySelectorAll(".frameimages");
      var totalimages = frameimages.length;

      x = 0;
      y = 0;
      for (let i = 0; i < frameimages.length; i++) {
        img = document.getElementById("gifframe" + i + "");
        img.onload = function() {
          ctx.drawImage(img, i * 100, 0, 100, 100);
          total++;
          console.log(total);
        }
      }
      totalwidth = (total) * 100;
      c.width = totalwidth;
      c.height = 100;
      setTimeout(() => {
        imageGiF = c.toDataURL("image/png");
        console.log(imageGiF);
        // addBgimg(imageGiF)
      }, 10);
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/buzzfeed/libgif-js/master/libgif.js"></script>
<div class="gifimage" id="placehere">
  <img src="https://media1.giphy.com/media/bzUwzbxcvJ3XQlcnoi/giphy.gif" alt="">

</div>
<div id="frames" class="classGIF"></div>
<canvas id='myCanvas' width="10000" height="300"></canvas>

Answer 1

您在事件处理程序中使用img 循环浏览图像。 但是，外部作用域中的这个变量 img 被每个循环覆盖，直到它完成循环所有内容，然后 img 卡在添加的最后一帧。
然后，当事件处理程序触发时，它会在每个实例中添加最后一帧，因为那是当时img 的值。循环在图像加载之前完成。

通过将它添加到它自己的 scope 并通过将其包装在一个函数中，变量被保留。

我还修改了您的代码以将 DOM img 元素存储在一个数组中，因此您不需要昂贵的 DOM 查找，这会使您的代码更快一点。

我在代码中添加了 cmets 来解释我的更改。

c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.clearRect(0, 0, ctx.width, ctx.height);
ctx.beginPath();
var imageGiF = "";
var total = 0;
let canvasWidth = 0;
let canvasHeight = 0;
$('div.gifimage img').each(function(idx, img_tag) {
  var total = 0;
  if (/^.+\.gif$/.test($(img_tag).prop("src"))) {
    var rub = new SuperGif({
      gif: img_tag,
      progressbar_height: 0
    });
    rub.load(function() {
      // An array for the image references
      let images = [];
      // Keep the reference to save on expensive DOM lookups every iteration.
      let frames = $("#frames");
      for (let i = 0; i < rub.get_length(); i++) {
        total += 1;
        rub.move_to(i);
        // var canvas = cloneCanvas(rub.get_canvas());
        var canvas = rub.get_canvas().toDataURL("image/png");
        img = $('<img id = "gifframe' + i + '"src= "' + canvas + '" class="frameimages">');
        
        // Use the reference to append the image.
        frames.append(img);
        
        // Add image to images array with the current index as the array index.
        // Use the jQuery get method to get the actual DOM element.
        images[i] = img.get(0);
      }
      var frameimages = document.getElementById("frames").querySelectorAll(".frameimages");
      var totalimages = frameimages.length;

      x = 0;
      y = 0;
      
      // Loop through all the images in the image array
      // Using a scope so the reference to img won't be overridden.
      images.forEach((img, index) => {
        img.onload = () => {
          ctx.drawImage(img, index * 100, 0, 100, 100);
          total++;
          console.log(total);
        } 
      })
      
      
      totalwidth = (total) * 100;
      c.width = totalwidth;
      c.height = 100;
      setTimeout(() => {
        imageGiF = c.toDataURL("image/png");
        console.log(imageGiF);
        // addBgimg(imageGiF)
      }, 10);
    });
  }
});

#frames { display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/buzzfeed/libgif-js/master/libgif.js"></script>
<div class="gifimage" id="placehere">
  <img src="https://media1.giphy.com/media/bzUwzbxcvJ3XQlcnoi/giphy.gif" alt="">

</div>
<div id="frames" class="classGIF"></div>
<canvas id='myCanvas' width="10000" height="300"></canvas>