vue使用gitshot生成gif

vue使用gitshot生成gif

问题背景

本文将介绍vue中使用gitshot生成gif。

问题分析

解决思路：

使用input组件上传一个视频，获取视频文件后用一个video组件进行播放，播放过程进行截图生成图片数组。

demo演示上传一个视频，然后生成对应的gif。

注意事项：

html中使用video标签调用本地视频结果只有音频没有视频画面问题？

解决思路：

html中 video 标签支持的视频格式，一共支持三种格式： Ogg、MPEG4、WebM。但这三种格式对于浏览器的兼容性却各不同。

比如MP4格式，MP4只是一个容器，里面还有一个叫编码器的东西。格式虽然都是MP4但是html中只支持H.264的编码格式。所以要用软件来转码。

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器。

可使用格式工厂软件对本地视频格式进行处理。

问题解决

（1）安装所需的npm包

npm install gifshot --save

（2）完整代码如下：

  
    
    
      
      确定
    
    
    
    输出gif如下:
  

 

import gifshot from 'gifshot';
export default {
  data() {
    return {
      videoUrl: null,
      interval: null,
      clipImgs: [],
      delay: 200,
    }
  },
  methods: {
    handleFileChange() {
      // 获取选择的视频文件
      this.selectedVideo = this.$refs.videoInput.files[0];
      console.log(this.selectedVideo);
      if (!this.selectedVideo) {
        console.log('请选择文件');
        return;
      }
      this.videoUrl = '';
      this.convertFileToBase64(this.selectedVideo)
        .then(base64Data => {
          this.videoUrl = base64Data;
          console.log('this videoUrl', this.videoUrl);
          this.start() //视频截图并转成gif
        })
        .catch(error => {
          console.error('Error:', error);
        });
    },
    // 文件转成base64
    convertFileToBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
      });
    },
    // base64转image
    getImageFromBase64(base64Image) {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = base64Image;
        img.onload = () => resolve(img);
        img.onerror = reject;
      });
    },
    start() {
      console.log('start');
      // 每次开始重置以下值
      clearInterval(this.interval);
      let video = this.$refs.videoRef; //获取video元素
      console.log('start', video);
      video.addEventListener('canplay', function () {
        console.log('canplay', video);
        video.play();
      });
      let that = this;
      video.addEventListener('play', function () {
        var canvas = document.createElement('canvas');
        // 根据视频大小调整画布尺寸
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        console.log('play', video);
        // 获取上下文对象
        var context = canvas.getContext('2d');
        this.interval = setInterval(() => {
          context.drawImage(video, 0, 0);  // 将视频内容绘制到画布上
          let screenshotDataURL = canvas.toDataURL(); // 转成Base64
          console.log(screenshotDataURL, that.clipImgs);
          that.clipImgs.push(screenshotDataURL) //把所有截图放到一个数组里
        }, that.delay)
      });
      // 监听视频播放结束后，说明截图完成。定时器停止，清除定时器缓存，开始转换。
      video.addEventListener('ended', function (e) {
        console.log('stop');
        clearInterval(this.interval)
        this.interval = null
        that.makeGIF()
      })
    },
    async makeGIF() {
      // 使用gifshot，将图片数组转成gif
      gifshot.createGIF({
        gifWidth: 200,
        gifHeight: 200,
        images: this.clipImgs,
        interval: 0.1,
        numFrames: 10,
        frameDuration: 1,
        fontWeight: 'normal',
        fontSize: '16px',
        fontFamily: 'sans-serif',
        fontColor: '#ffffff',
        textAlign: 'center',
        textBaseline: 'bottom',
        sampleInterval: 10,
        numWorkers: 2
      }, function (obj) {
        console.log(obj, " obj");
        if (!obj.error) {
          let image = obj.image;
          let animatedImage = document.createElement('img');
          animatedImage.src = image;
          animatedImage.style = 'margin: 15px';
          document.body.appendChild(animatedImage);
        }
      });
    }
  }
}

运行结果如下：

选择本地视频文件，确定选择会播放该视频，播放完成生成对应的gif文件。