Awesome

Function

• Fully restore the functionality of Gifsicle 1.92
• Supports input and output of multiple GIFs
• Supports multiple commands
• Small (Gzip≈150KB)
• no dependencies

Demo

Basic usage

For more commands, please refer to the Gifsicle Manual.

Complete example

gifsicleTool.js By combining multiple commands, it can complete more practical functions.

• Merge after modifying size
• Overlay Mode Resize
• Parse Gif information
• play backwards
• Export all frames
• Cut excess transparency

Quick start

npm install

import in vue

$ npm i gifsicle-wasm-browser --save

import gifsicle from "gifsicle-wasm-browser";

gifsicle.run({
  input: [{
      file: "./cat.gif",
      name: "1.gif",
  }],
  command: [`
    -e -U 
    --resize 100x_ 
    1.gif 
    -o /out/out.gif`],
})
.then(outGifFiles => {
  console.log(outGifFiles);
  // [File,File,File ...]
});

cdn

cdn demo

<script type="module">
  import gifsicle from 'https://unpkg.com/gifsicle-wasm-browser/dist/gifsical.min.js'
  // or
  import gifsicle from 'https://cdn.jsdelivr.net/npm/gifsicle-wasm-browser/dist/gifsicle.min.js'
      ...
  })
</script>

Api

gifsicle.run(input=[], command=[])

input

• Array: input GIFs file

• file

  • String: the web url of the GIF
  • File , Blob , ArrayBuffer: local files obtained via <input type="file">

• name

  • String: the filename that will be used in command

command

• Array: command to execute

folder

• Array: (optional) folder name to be used in command

isStrict

• Boolean: (optional) command End immediately on error or warning
• default: false

return

array of GIFs File

Tips

• Function usage

  • name in input can be customized, but cannot be repeated.
  • The last line of command must contain -o /out/**.gif,
  • The default available directories are / , /out , /tem, when command is executed, all files in /out will be exported
  • command will be executed one by one in sequence, please use multiple gifsicle.run() if you need to process multiple GIFs at the same time. Execute sequentially | Execute simultaneously

• Experience about compressing Gif

  • Use -O3 or -O2 with caution, especially for large files over 10Mb, the time-consuming will increase exponentially, and the compression effect is almost the same as -O1.
  • The value range of lossy is between 1-200, the larger the value, the more obvious the noise of the Gif image.
  • In my experience, 30-60 is a more balanced choice.

🦁️ Gif:little lion ears

Author

gifsicle-wasm-browser is @renzhezhilu at wasm-codecs/gifsicle and Developed on the basis of gifsicle.

To do

• single Gif input and output
• Multiple Gifs input and output (full version)
• Npm
• Multi-core processing (SharedArrayBuffer)