renzhezhilu / gifsicle-wasm-browser

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

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: [`
    -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)

gifsicle-wasm-browser's Issues

Maximum call stack size exceeded

Please remove the console.log entries

Hi, thanks for the library, it's been very helpful. The only issue I have with it is that it prints multiple console.log statements every time I invoke gifsicle.run(). Could you consider removing the console.log entries? Perhaps let the caller specify a logger to use if you still want to provide the logged information

Unminified dist

Would it be possible to supply an unminified dist along with the minified one?

How to import this library through cdn in Vue

Vue can not recongnize gifsicle from cdn,maybe something wrong