En | 中文

Gifsicle Wasm Browser

Run Gifsicle in your browser to compress, crop, frame, resize, and more on GIFs.

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.

Compression	Action Frame	Crop	Size	Other
Low middle high	Select the last 2 frames Select 3 frames before and after delete the first 20 frames Replace 3-6 frames with other GIFs rewind Alternate 2 GIFs export all frames	According to the upper left and lower right corners According to the upper left corner and height and width Crop after rotation Crop after flip Cut out excess transparency	Modify the width to 100px Shrink by 50% Modify aspect ratio	loop read info merge Play speed

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: ["--resize 100x_ 1.gif -o /out/out.gif"],
})
.then(async(d) => {
  console.log(d);
  // [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

• Array: input Gif file

• file

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

• 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 ends immediately on error
• default: false

Tips

• 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

Author

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

To do

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