怎么使用Vue+canvas實現視頻截圖功能

這篇“怎么使用Vue+canvas實現視頻截圖功能”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么使用Vue+canvas實現視頻截圖功能”文章吧。

開發過程中遇到一個實際問題，上傳的視頻需要提供視頻封面（視頻封面必填）。封面可以自己制作并上傳，但是這樣需要脫離網站，用其他方式制作封面，使用體驗并不友好，因此第一個想到的方案是：上傳視頻時，若人員未上傳封面，自動截取視頻第一幀作為封面，但是這樣會出現一種情況：視頻第一幀是黑色，導致封面為黑色。因此考慮視頻上傳后，在播放中由人員自行截取畫面作為視頻封面。

簡單效果如圖：

前端代碼如下：

<template>
  <div>
    <video src="https://{{視頻地址}}.mp4"
           crossOrigin="Anonymous" controls ></video>
    <img :src="imgSrc">
    <div>
      <el-button @click="cutPicture">
        截圖
      </el-button>
    </div>
    <canvas id="myCanvas" width="343" height="200"></canvas>
  </div>
</template>
<script>

  export default {
    name: 'video',
    data () {
      return {
        imgSrc: '',
        videoData:{},
      }
    },
    methods: {
      //截取當前幀的圖片
      cutPicture () {
        let self = this
        var v = document.querySelector('video')
        let canvas = document.getElementById('myCanvas')
        // canvas.setAttribute("crossOrigin",'Anonymous')
        var ctx = canvas.getContext('2d')
        ctx.drawImage(v, 0, 0, 343, 200)
        var oGrayImg = canvas.toDataURL('image/jpeg')
        // this.imgSrc = oGrayImg
        // axios請求，將截圖傳給后端API
        this.$axios.post('test/upload', {file: oGrayImg})
      },
    }
  }
</script>

以上就是關于“怎么使用Vue+canvas實現視頻截圖功能”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。