js implements decomposition and synthesis of GIF images

I accidentally saw an article about the problem of processing GIF images in pure front-end, which felt quite interesting, so I realized it myself;

There are two main third-party libraries used: synthetic GIF images and decomposition;

Decompose GIF

1. Introduce Git library

import SuperGif from './'

2. Process pictures

var file = [0];
 (('image/gif'));
 load_gif(file);
function load_gif(gif_source) {
  var gifImg = ('gifImg');
  // The gif library requires the img tag to configure the following two properties  ('rel:animated_src', (gif_source))
  ('rel:auto_play', '0')
 
  // Create a new gif instance  var rub = new SuperGif({ gif: gifImg } );
 
  var running = false;
  (function(){
  var img_list = [];
  var j = 0;
  (rub.get_length());
  for (var i=1; i &lt;= rub.get_length(); i++) {
  // traverse every frame of the gif instance  rub.move_to(i);
 
  var imgImage = new Image();
  //Canvas generates base64 image data   = rub.get_canvas().toDataURL('image/jpeg',0.8);
  }
 }

Synthesize GIF images

1. Introduce Git library

import GIF from './'

2. Picture synthesis

var gif = new GIF({
  workers: 2,
  quality: 10,
  workerScript: 'js/'
});
var j = 0;
 
var canvas= ("canvas");
var ctx = ('2d');
 
for (var i=1; i &lt;= len; i++) {
 
 var imgImage = new Image();
  = img;
  = function (e) {
 
 //Canvas draws pictures  = width;
  = height;
 (width,height)
 //Put the base color  = "#fff";
 (0, 0, , );
 (imgImage, 0, 0, width, height);
 
 
 (canvas,{copy:true,delay:50});
 j++;
 //picture if(j&gt;=len) {
 ()
 };
 }
}
('finished', function(blob) {
 //Generate image link  var url = (blob);
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.