En | 简体中文
在浏览器中运行 Gifsicle,对 GIFs 进行压缩、裁剪、操作帧、调整尺寸等等操作。
- 完整还原 Gifsicle 1.92 的功能
- 支持多个 GIFs 的输入和输出
- 支持多条命令
- 小巧(Gzip≈150KB)
- 无依赖
更多命令请查阅Gifsicle手册。
压缩 | 操作帧 | 裁剪 | 尺寸 | 其他 |
---|---|---|---|---|
轻量 普通 极限 |
选中最后2帧 选中前3帧和后3帧 删除前20帧 将3-6帧替换成其他GIF 倒带 将2个GIF交替 导出所有帧 |
根据左上角和右下角 根据左上角和高宽 旋转后裁剪 翻转后裁剪 裁剪掉多余透明 |
修改宽度为100px 缩小50% 修改纵横比 |
循环次数 读取信息 合并图片 播放速度 |
gifsicleTool.js 通过将多条命令组合起来,完成比较实用的功能。
$ 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 ...]
});
<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>
Array
: 输入的 Gif 文件-
String
: GIF的网络urlFile
、Blob
、ArrayBuffer
: 通过<input type="file">获取的本地文件
-
String
: 将在command
中使用的文件名
Array
: 执行的命令
Array
: (可选的) 将在command
中使用的文件夹名称
Boolean
: (可选的)command
发生错误或警告时立即结束- default:
false
GIF File数组
-
- 谨慎使用
-O3
或-O2
,尤其是10Mb以上大文件,耗时会成倍上涨,并且压缩效果和-O1
几乎无差别。 lossy
数值范围在 1-200 之间,数值越大Gif画面的噪点越明显。- 根据我的经验, 30-60 是比较均衡的选择。
- 谨慎使用
🦁️ Gif:小狮子的耳朵
gifsicle-wasm-browser 是 @renzhezhilu 在 wasm-codecs/gifsicle 和 gifsicle 基础上开发。
- 单个 Gif 输入和输出
- 多个 Gif 输入输出(完整版)
- Npm
- 多核处理(SharedArrayBuffer)