vue使用gitshot生成gif問題

更新時間：2024年03月06日 09:43:57 作者：baorant在寫代碼

這篇文章主要介紹了vue使用gitshot生成gif問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

問題背景

本文將介紹vue中使用gitshot生成gif。

問題分析

解決思路

使用input組件上傳一個視頻，獲取視頻文件后用一個video組件進(jìn)行播放，播放過程進(jìn)行截圖生成圖片數(shù)組。

demo演示上傳一個視頻，然后生成對應(yīng)的gif。

注意事項

html中使用video標(biāo)簽調(diào)用本地視頻結(jié)果只有音頻沒有視頻畫面問題？

解決思路

html中 video 標(biāo)簽支持的視頻格式，一共支持三種格式：

Ogg
MPEG4
WebM

但這三種格式對于瀏覽器的兼容性卻各不同。

比如MP4格式，MP4只是一個容器，里面還有一個叫編碼器的東西。

格式雖然都是MP4但是html中只支持H.264的編碼格式。

所以要用軟件來轉(zhuǎn)碼。

MP4 = MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器
WebM = WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器
Ogg = Ogg 文件使用 Theora 視頻編解碼器和 Vorbis音頻編解碼器。

可使用格式工廠軟件對本地視頻格式進(jìn)行處理。

問題解決

（1）安裝所需的npm包

npm install gifshot --save

（2）完整代碼如下：

<template>
  <div style="display: flex; flex-direction: column;">
    <!-- 選擇要上傳的視頻 -->
    <div style="display: flex;">
      <input type="file" ref="videoInput" accept="video/mp4" style="margin: 15px;">
      <button @click="handleFileChange" style="height: 30px; width: 50px; margin: 15px;">確定</button>
    </div>

    <video style="width: 400px;height: 400px; margin: 15px;" ref="videoRef" :src="videoUrl" controls>
    </video>
    <div style="margin: 15px;">輸出gif如下:</div>
  </div>
</template>

<script>
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() //視頻截圖并轉(zhuǎn)成gif
        })
        .catch(error => {
          console.error('Error:', error);
        });
    },

    // 文件轉(zhuǎn)成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轉(zhuǎn)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');

        // 根據(jù)視頻大小調(diào)整畫布尺寸
        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);  // 將視頻內(nèi)容繪制到畫布上
          let screenshotDataURL = canvas.toDataURL(); // 轉(zhuǎn)成Base64
          console.log(screenshotDataURL, that.clipImgs);
          that.clipImgs.push(screenshotDataURL) //把所有截圖放到一個數(shù)組里
        }, that.delay)
      });
      // 監(jiān)聽視頻播放結(jié)束后，說明截圖完成。定時器停止，清除定時器緩存，開始轉(zhuǎn)換。
      video.addEventListener('ended', function (e) {
        console.log('stop');
        clearInterval(this.interval)
        this.interval = null
        that.makeGIF()
      })
    },

    async makeGIF() {
      // 使用gifshot，將圖片數(shù)組轉(zhuǎn)成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);
        }
      });
    }
  }
}
</script>

運(yùn)行結(jié)果如下：