GIFs on PIXI

GIFs rendering on PIXI js

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.0/pixi.min.js"></script>
<script src="https://rawgit.com/matt-way/gifuct-js/master/dist/gifuct-js.min.js"></script>
<div>
  GIFs on PIXI
</div>
<img id="htmlGif" />
<canvas id="pixi"></canvas>

JavaScript

var SCALE = 0.5;
var url = 'http://ziocasino.io/img/effect/emoj_cry.gif';
//var url = 'https://i.giphy.com/3o72FeZuTL3u0mG3Vm.gif';

var app = new PIXI.Application(200, 300, {
  transparent: true,
  view: document.querySelector('#pixi')
});
document.body.appendChild(app.view);

var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";

oReq.onload = function(oEvent) {
  var arrayBuffer = oReq.response;
  if (arrayBuffer) {

    var start = performance.now();
    var gif = new GIF(arrayBuffer);
    var frames = gif.decompressFrames(true);
    console.log(performance.now() - start);

    var dims = frames[0].dims;
    app.renderer.resize(dims.width * SCALE, dims.height * SCALE);

    var canvas = createCanvas(dims);
    var ctx = canvas.getContext('2d');
    var tmpCanvas = createCanvas(dims);
    var tmpCtx = tmpCanvas.getContext('2d');

    const gifSprite = new PIXI.Sprite(PIXI.Texture.fromCanvas(canvas));
    gifSprite.scale.set(SCALE);

    var index = 0;

    function update() {
      var frame = frames[index];
      var fdims = frame.dims;
      setTimeout(function() {
        requestAnimationFrame(update);
      }, frame.delay);

      drawFrame(frame, tmpCtx);
      ctx.drawImage(tmpCanvas, fdims.left, fdims.top);
      gifSprite.texture.update();
      index = ++index % frames.length;
    }
    update();


    //gifSprite.scale.set(0.5,0.5);
    app.stage.addChild(gifSprite);
    var img = document.querySelector('#htmlGif');
    img.src = url;
    img.width = dims.width * SCALE;
    img.height = dims.height * SCALE;
  }
};

oReq.send(null);

function createCanvas(dims) {
  var canvas = document.createElement('canvas');

  canvas.width = dims.width;
  canvas.height = dims.height;

  return canvas;
}

function drawFrame(frame, ctx) {
  var dims = frame.dims;
  var frameImageData = ctx.createImageData(dims.width, dims.height);
  frameImageData.data.set(frame.patch);
  ctx.putImageData(frameImageData, 0, 0);
}