前端生成 GIF动图 3 (接上文 可以生成 gif 了）

思路：通过canvas截取 video播放视频的帧 ，生成 gif 

关键代码

html ：

<video id="videoBox" controls autoplay class="video" width="1150px" height="650px">

        <source :src="videoUrl" type="video/webm" />

 </video>

这个video播放生成的视频

这里我设置了自动播放，所以不需要再有播放的事件

js：

```

const video = document.getElementById('videoBox')  

          //创建gif对象

          const gif = new GIF({

              workers: 2,

              quality: 10,

              workerScript: getGifWorker(),

            })

          //设置录制间隔，播放期间每隔200ms录制一帧

          const intervalId = setInterval(() => {

            //创建新画布

            const canvas = document.createElement('canvas');

            canvas.width = video.videoWidth;

            canvas.height = video.videoHeight;

            //将视频画到画布上

            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)

            //将画布添加到gif中，设置延迟为200ms

            gif.addFrame(canvas, { delay: 200 })

          }, 200)

          //监听视频播放结束事件

          video.addEventListener('ended', function () {

            // 在视频播放结束时执行操作

            clearInterval(intervalId)

            gif.on('finished', function (blob) {

              // 创建一个链接并下载 GIF 图像

              const url = URL.createObjectURL(blob)

              const a = document.createElement('a')

              document.body.appendChild(a)

              a.href = url

              a.download = '数据.gif'

              a.click()

              document.body.removeChild(a)

              URL.revokeObjectURL(url)

            })

            gif.render()

            dialogVisible.value = false

          })

```

我这里封装了一下组件，写法上有一点点差别