vue + gif.js

1.准备

// 
import {onMounted,ref} from 'vue'
import GIF from '@/js/gif'
// 获取dom
// 输出视频dom
const videoDom = ref(null)
const imgDom = ref(null)
const canvas = ref(null)

// startGif，开始方法与结束方法
let startGif
let stopGif

2.onMounted

    canvas.value.width = 400
  canvas.value.height = 400
  // 创建gif工具
  const gif = new GIF({
        workers: 20,
        quality: 1,
        width : canvas.value.width,
        height : canvas.value.height,
        workerScript : './js/gif.worker.js '
    });
    

3.渲染方法

    let timer
    // 获取canvas2dcontext对象
 const context = canvas.value.getContext('2d')
  // 声明渲染方法
  const renderOnImg = () => {
      // 创建img元素
    const img = document.createElement('img')
    // 先清除上一帧
    context.clearRect(0,0,canvas.value.width,canvas.value.width)
    // 渲染这一帧
    context.drawImage(videoDom.value,0,0,canvas.value.width,canvas.value.height)
    // 获取base
    img.src = canvas.value.toDataURL('image/png')
    img.onload = () => {
    // 加载完图片后push进Gif
      gif.addFrame(img,{
        delay: 100,// 多少毫秒一帧,
        copy : false
      })
    }
  }

4.定义开始与结束的方法

startGif = () => {
    // 先清除
    context.clearRect(0,0,canvas.value.width,canvas.value.width)
    videoDom.value.play()
   timer =  setInterval(renderOnImg,100)
  }
  stopGif = () => {
    // videoDom.value.stop()
    gif.on('finished',blob => {
      imgDom.value.src = URL.createObjectURL(blob)
      console.log(URL.createObjectURL(blob))
      imgDom.value.setAttribute('download', 'my.gif')
    })
      gif.render()
    clearInterval(timer)
  }