js监听gif停止 libgif-js Gif 操作（开始，暂停，移动帧...) 功能强大

约定不等于承诺〃 2022-12-14 06:09 142阅读 0赞

这件事的起因是因为一个需求，需要 监听 gif 完成然后跳转到登录页，百度了很多都没有找到类似的教程，在自己强大的搜索能力下，还是找到了，细节看下面。

[github.com/buzzfeed/li…][github.com_buzzfeed_li]  框架地址，功能挺强大的，具体使用方法可以查看文档，因为工作原因，就不一一列出实列了，只贴实际使用的代码，如果有使用的问题的话，可以共同交流一下。

<template>
        <img ref="img">
    </template>
    
    <script>
    import '../../static/js/libgif.js'
    import RubbableGif from '../../static/js/rubbable'
    
    export default {
      name: 'Gif',
      props: {
        imgUrl: String // 实列：../../static/gif/tenor.gif
      },
      async mounted () {
        try {
          // 通过异步函数，获取gif文件
          let fetchImg = await fetch(this.imgUrl)
    
          fetchImg.blob().then(blob => {
            // 通过 FileReader 读取文件数据，获取 Base64
            let reader = new FileReader()
            reader.onloadend = () => {
              this.$refs.img.src = reader.result // 输出DataURL数据
    
              // 检测gif 是否完成
              let rubbableGif = new RubbableGif({
                gif: this.$refs.img,
                on_end: () => {
                  // 监听gif 完成后，发送一个事件，通知父组件
                  this.$emit('gifFinish')
                }
              })
              rubbableGif.load()
            }
            reader.readAsDataURL(blob) // 将blob数据转换成DataURL数据
          })
        } catch (e) {
          console.error('程序错误', e)
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    复制代码

转载于：[https://juejin.im/post/6844903733235548174][https_juejin.im_post_6844903733235548174]

[github.com_buzzfeed_li]: https://github.com/buzzfeed/libgif-js
[https_juejin.im_post_6844903733235548174]: https://juejin.im/post/6844903733235548174