/gif-parser-web

在web前端项目内获取GIF图片时长、帧数等信息（可在任意一个基于JS开发的框架中运行）

Primary LanguageTypeScriptMIT LicenseMIT

gif-parser-web · npm yarn github

写在前面

关于此插件的更多介绍以及实现原理请移步👉：JS获取GIF总帧数

插件安装

# yarn安装
yarn add gif-parser-web

# npm安装
npm install gif-parser-web --save

插件使用

由于插件采用原生js编写且不依赖任何第三方库，因此它可以在任意一台支持js的设备上运行。

import形式使用插件

  • 在需要获取Gif图像信息的业务代码中导入插件
import GifParse from "gif-parser-web";
  • 在业务代码中使用时实例化插件，调用对应的方法即可
const gifParse = new GifParse("插件支持传入一个图像url作为可选参数");
const gifInfo = gifParse.getInfo("此处支持File类型的数据作为可选参数，如果传入则使用此处的参数作为gif数据源");
gifInfo.then((res)=>{
  console.log("解析完成", res);
})

cdn形式使用插件

  • 将插件的dist文件夹复制到你的项目中
  • 使用script标签引入dist目录下的gifParserPlugin.umd.js文件
<script src="./gifParserPlugin.umd.js"></script>
  • 在业务代码中使用时实例化插件，调用对应的方法即可
const gifParse = new gifParserPlugin("插件支持传入一个图像url作为可选参数");
const gifInfo = gifParse.getInfo("此处支持File类型的数据作为可选参数，如果传入则使用此处的参数作为gif数据源");
gifInfo.then((res)=>{
  console.log("解析完成", res);
})

注意⚠️：GitHub中是不会上传dist目录的，你想要自己将项目clone到本地，编译得到dist文件夹。

当然，你也可以直接下载gifParserPlugin.umd.js文件来使用

写在最后

至此，插件的使用方法就介绍完了。