Vue+canvas實現視頻截圖功能

Posted on by

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

簡單效果如圖：

前端代碼如下：

<template>
  <div>
    <video src="https://{{視頻地址}}.mp4"
           crossOrigin="Anonymous" controls style="width:300px;"></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>

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：