Vue+canvas实现视频截图功能

在 上张贴 由 lianhe发表回复

开发过程中遇到一个实际问题，上传的视频需要提供视频封面（视频封面必填）。封面可以自己制作并上传，但是这样需要脱离网站，用其他方式制作封面，使用体验并不友好，因此第一个想到的方案是：上传视频时，若人员未上传封面，自动截取视频第一帧作为封面，但是这样会出现一种情况：视频第一帧是黑色，导致封面为黑色。因此考虑视频上传后，在播放中由人员自行截取画面作为视频封面。

简单效果如图：

前端代码如下：

<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • JS实现预加载视频音频/视频获取截图（返回canvas截图）
  • vue项目中canvas实现截图功能
  • vue3如何将html元素变成canvas(海报生成),进行图片保存/截图
  • 原生js基于canvas实现一个简单的前端截图工具代码实例
  • 微信小程序canvas拖拽、截图组件功能
  • JavaScript+html5 canvas实现本地截图教程
  • vue 实现网页截图功能详解
  • 如何用vue实现网页截图你知道吗
  • Vue拖动截图功能的简单实现方法
  • vue 实现无规则截图
  • electron+vue实现div contenteditable截图功能
张贴在2