Skip to content

Run Gifsicle in the browser ,to GIFs compress, crop, manipulate frames, resize, Etc .

License

Notifications You must be signed in to change notification settings

renzhezhilu/gifsicle-wasm-browser

Repository files navigation

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.

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

gifsicle-wasm-browser Compression parameter graphic 02

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)