README_CN.md

En | 简体中文

Gifsicle Wasm Browser

在浏览器中运行 Gifsicle，对 GIFs 进行压缩、裁剪、操作帧、调整尺寸等等操作。

功能

• 完整还原 Gifsicle 1.92 的功能
• 支持多个 GIFs 的输入和输出
• 支持多条命令
• 小巧(Gzip≈150KB)
• 无依赖

Demo

基础用法

更多命令请查阅Gifsicle手册。

压缩	操作帧	裁剪	尺寸	其他
轻量 普通 极限	选中最后2帧 选中前3帧和后3帧 删除前20帧 将3-6帧替换成其他GIF 倒带 将2个GIF交替 导出所有帧	根据左上角和右下角 根据左上角和高宽 旋转后裁剪 翻转后裁剪 裁剪掉多余透明	修改宽度为100px 缩小50% 修改纵横比	循环次数 读取信息 合并图片 播放速度

完整示例

gifsicleTool.js 通过将多条命令组合起来，完成比较实用的功能。

• 修改尺寸后合并
• 覆盖模式调整尺寸
• 解析 Gif 信息
• 倒放
• 导出所有帧
• 剪切多余透明

快速开始

npm 安装

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: 输入的 Gif 文件

• file

  • String: GIF的网络url
  • File 、 Blob 、 ArrayBuffer: 通过<input type="file">获取的本地文件

• name

  • String: 将在 command 中使用的文件名

command

• Array: 执行的命令

folder

• Array: (可选的) 将在 command 中使用的文件夹名称

isStrict

• Boolean: (可选的) command 发生错误或警告时立即结束
• default:false

返回

GIF File数组

注意事项

• 函数使用

  • input 中的 name 可以自定义，但是不能重复。
  • command 的最后一条必须包含-o /out/**.gif,
  • 默认可用的目录有 / 、 /out 、 /tem，当 command 执行完成后会将/out的所有文件导出
  • command 将按顺序逐个执行, 需要对多个 GIFs 同时处理时请使用多个 gifsicle.run()。按顺序执行 | 同时执行

• 关于压缩Gif的经验

  • 谨慎使用-O3或-O2,尤其是10Mb以上大文件,耗时会成倍上涨，并且压缩效果和-O1几乎无差别。
  • lossy数值范围在 1-200 之间,数值越大Gif画面的噪点越明显。
  • 根据我的经验, 30-60 是比较均衡的选择。

🦁️ Gif:小狮子的耳朵

作者

gifsicle-wasm-browser 是 @renzhezhilu 在 wasm-codecs/gifsicle 和 gifsicle 基础上开发。

To do

• 单个 Gif 输入和输出
• 多个 Gif 输入输出(完整版)
• Npm
• 多核处理(SharedArrayBuffer)