Как перевести .gif в массив .png в javascript?

115
06 февраля 2022, 06:50

мне нужно простое решение, одной функцией
или небольшой однофайловой библиотекой загружаемой в html файле

мне нужно чтобы это работало в браузере, на стороне сервера я и сам бы мог вручную их в .png перевести)

да, я вытащил кадры с помощью скрипта gifler, но проблема что сам файл этого скрипта даже в сжатом виде весит 100 килобайт.

Answer 1

Достаточно просто сделать на основе кода отсюда:

gifler('/assets/yoda.gif').frames(canvas, onDrawFrame);

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.1.0/konva.min.js"></script>
    <script src="https://unpkg.com/gifler@0.1.0/gifler.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva GIF Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      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('/assets/yoda.gif').frames(canvas, onDrawFrame);
      // draw resulted canvas into the stage as Konva.Image
      var image = new Konva.Image({
        image: canvas
      });
      layer.add(image);
    </script>
  </body>
</html>
READ ALSO
promise.all и Event loop
javascript

promise.all и Event loop

Насколько я понял принцип работы Event Loop, при выполнении кода промисы попадают в очередь Microtask queue и затем выполняются поочередно, потому что...

 94
Как сохранить работу (вкл/выкл) расширение в браузере после перезагрузки страницы
javascript

Как сохранить работу (вкл/выкл) расширение в браузере после перезагрузки страницы

Чтобы когда плагин включен все работало даже после перезагрузки страницы и отменял изменения после выключения

 85
Рекурсия в функции draw
javascript

Рекурсия в функции draw

Пожалуйста, помогите дописать код, чтобы двоеточие в часах мигало, а время обновлялось без перезагрузки страницы

 95
Ошибка в telegram bot
javascript

Ошибка в telegram bot

код:

 79