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](https://www.lcdf.org/gifsicle/man.html).
## Complete example
[gifsicleTool.js](./docs/js/gifsicleTool.js) By combining multiple commands, it can complete more practical functions.
- [Merge after modifying size](https://codepen.io/random233/pen/WNMWqyq?editors=1001)
- [Overlay Mode Resize](https://codepen.io/random233/pen/PoQgrrL?editors=1001)
- [Parse Gif information](https://codepen.io/random233/pen/JjpVQxr?editors=1001)
- [play backwards](https://codepen.io/random233/pen/zYRXVZr?editors=1011)
- [Export all frames](https://codepen.io/random233/pen/VwQNJMr?editors=1011)
- [Cut excess transparency](https://codepen.io/random233/pen/jOZRjzg?editors=1000)
# Quick start
## npm install
[import in vue](https://codesandbox.io/s/crimson-lake-jbuudt?file=/src/App.vue)
````
$ npm i gifsicle-wasm-browser --save
````
````javascript
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](https://codepen.io/random233/pen/BaYEwvr)
```html
````
# 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 [\](https://codepen.io/random233/pen/BaYEwvr?editors=1010)
- ### 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](https://developer.mozilla.org/en-US/docs/Web/API/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](https://codepen.io/random233/pen/mdXgqwK?editors=1001) | [Execute simultaneously](https://codepen.io/random233/pen/ZErZavQ?editors=1000)
- ### 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](https://user-images.githubusercontent.com/7707921/188507621-49aa2691-a7d4-4b35-bb06-4ecb35b361d4.gif)
# Author
gifsicle-wasm-browser is [@renzhezhilu](https://github.com/renzhezhilu) at
[wasm-codecs/gifsicle](https://github.com/cyrilwanner/wasm-codecs/tree/master/packages/gifsicle) and
Developed on the basis of [gifsicle](https://github.com/kohler/gifsicle).
# To do
- [x] single Gif input and output
- [x] Multiple Gifs input and output (full version)
- [x] Npm
- [ ]
Multi-core processing ([SharedArrayBuffer](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer))
