JSFiddle - React, Tailwind, and code Playground

by Guddu Kumar

HTML

<script src="https://cdn.rawgit.com/jnordberg/gif.js/6258ac58/dist/gif.js"></script>
<script src="https://cdn.rawgit.com/jnordberg/gif.js/6258ac58/dist/gif.worker.js"></script>
<canvas id="result"  style='display:none'></canvas>
this is the gif original..
<br>
<img src="https://media1.giphy.com/avatars/nikdudukovic/ylDRTR05sy6M.gif">
<br>
i need add the generated gif..
<img id='gifgenerated' />

JavaScript

var res_c = document.getElementById("result");
    var res_ctx = res_c.getContext('2d');


    var gif = new GIF({
        workers: 2,
        quality: 7
       // workerScript: "https://cdn.rawgit.com/jnordberg/gif.js/6258ac58/dist/gif.worker.js"
    });
    

    var images=[  
  					"https://dummyimage.com/16:9x1080/",
  					"https://dummyimage.com/16:9x1080/"
      ]


    for(var x=0; x<images.length;x++){
    debugger

      var image_gif = new Image;
      image_gif.src = images[x];
      image_gif.crossOrigin="anonymous";
      res_ctx.drawImage(image_gif, 0, 0,280,280);
      var imageData = res_ctx.getImageData(0, 0, 280, 280);
      res_ctx.putImageData(imageData,0,0);
      gif.addFrame(res_c,{copy:true,delay: 120});
    }
    
     gif.render();
     gif.on('finished', function(blob) {
       console.log("finished");
       var url=URL.createObjectURL(blob);
       document.getElementById("gifgenerated").src=url;
     })