Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/renzhezhilu/gifsicle-wasm-browser
Run Gifsicle in the browser ,to GIFs compress, crop, manipulate frames, resize, Etc .
https://github.com/renzhezhilu/gifsicle-wasm-browser
compress-gif gifsicle gifsicle-in-browser gifsicle-wasm
Last synced: 3 months ago
JSON representation
Run Gifsicle in the browser ,to GIFs compress, crop, manipulate frames, resize, Etc .
- Host: GitHub
- URL: https://github.com/renzhezhilu/gifsicle-wasm-browser
- Owner: renzhezhilu
- License: mit
- Created: 2021-11-04T11:23:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-20T21:06:09.000Z (over 1 year ago)
- Last Synced: 2024-03-17T09:21:58.326Z (3 months ago)
- Topics: compress-gif, gifsicle, gifsicle-in-browser, gifsicle-wasm
- Language: JavaScript
- Homepage: https://renzhezhilu.github.io/gifsicle-wasm-browser/
- Size: 74.7 MB
- Stars: 110
- Watchers: 3
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome - renzhezhilu/gifsicle-wasm-browser - Run Gifsicle in the browser ,to GIFs compress, crop, manipulate frames, resize, Etc . (JavaScript)
README
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](https://www.lcdf.org/gifsicle/man.html).
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](./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
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'
...
})
````
# 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))