vue 如何获取视频第一帧

目录vue获取视频第一帧vue视频截取第一帧图片-组件VideotoImage组件文件vue获取视频第一帧findvideocover(){letsize=160...

目录

vue获取视频第一帧

findvideocover() {
        let size = 160
        // 获取video节点
        const video = document.getElementById("videoPlay");
        video.width = size
        video.height = size
        video.currentTime = 1 // 第一帧
        //创建canvas对象
        const canvas = document.createElement("canvas")
        canphpvas.width = size
        canvas.height = size
        this.$nextTick(()=>{
          // 利用canvas对象方法绘图
          canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
          // 转换成base64形式
          const img = canvas.toDataURL("image/jpeg") // 这个就是图片的base64
          this.coverUrl = img
        })
      }

vue视频截取第一帧图片-组件

Video to Image

关于vue下视频截取第一帧网上方法众多, 我这边总结了一下并且归纳成组件, 希望对为此困扰的你提供一些帮助, 仅需要做一点点的修改页,本文内的代码可以复制后直接使用 !

开发前准备

确定为vue环境且不是Vue 1;

本组件附带了转成图片后的上传功能, 确定您安装了axIOS, 若不需要, 可以返回图片的file或blob

开始使用

我是把组件代码存放在@/components/videoToImg 当然您可以自行修改

在需要此功能的使用的vue文件内写入以下

引入

import videotoimg from '@/components/videoToImg'

载入组件

components: {
  videotoimg
},

使用

<videotoimg :fileObj="fileObj" @uploadSuccess='onSuccess'></videotoimg>
// 对应数据
> data:
fileObj = {
 src: blob:http://192.168.3.15:9528/c1df8e08-039b-4da8-a653-4b93f3747d36, // 选取的视频文件
 videoW: number, // 视频宽度 单位为px
 videoH: number, // 视频高度 单位为px
};
// 这里是视频上传成功后返回给你的参数
> methods:
onSuccess: url => { url = { imgUrl: "/upload/image/20201124/1331153160697417728.jpg" }}

组件文件

这里我将文件命名为@/components/videoToImg/index.vue

<template>
 <div style="height: 1px; overflow:hidden; opacity: 0">
  <div id="videoArea"></div>
  <img :src="imgSrc" />
  <div>
   <div @click="cutPicture">截图 {{ videoW }}</div>
  </div>
  <canvas
   id="myCanvas"
   :width="videoW + 'px'"
   :height="videoH + 'px'"
  ></canvas>
 </div>
</template>
<script>
import { getRequestHeader } from "@/utils/auth"; // 这里是获取我自己的请求头 可以忽略 或者删除
import axios from "axios";
export default {
 props: {
  fileObj: {
   type: Object,
   default: {},
   require: true,
  },
 },
 name: "videotoimg",
 watch: {
  fileObj: {
   handler(newVal, oldVal) {
    console.log(newVal, oldVal);
    this.onClean();
    this.videoW = newVal.videoW;
    this.videoH = newVal.videoH;
    this.cutPicture();
   },
  },
 },
 data() javascript{
  return {
   imgSrc: "",
   videoW: "",
   videoH: "",
   headers: getRequestHeader(),
   uploadUrl: process.env.BASE_API + "v1/general/resource/upload_video", // 截取后上传的地址
  };
 },
 methods: {
  onClean() {
   this.imgSrc = "";
   this.videoW = "";
   this.videoH = "";
  },
  cutPicture() {
   let area = document.querySelector("#videoArea");
   area.innerhtml = `
    <video src="${this.fileObj.src}" controls style="width: ${this.videoW}px"></video>
   `;
   const that = this;
   setTimeout(() => {
    var v = document.querySelector("video");
    let canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.drawImage(v, 0, 0, this.videoW, this.videoH);
    var oGrayImg = canvas.toDataURL("image/jpeg");
    that.imgSrc = oGrayImg;
    var arr = oGrayImg.split(","),
     mime = arr[0].match(/:(.*?);/)[1],
     bstr = atob(arr[1]),
     n = bstr.length,
     u8arr = new Uint8Array(n);
    while (n--) {
     u8arr[n] = bstr.charCodeAt(n);
    }
    var file = new File([u8arr], "videoimg.jpg", { type: mime });
    console.info(file); // 注意: 如果你不需上传,这里就可以拿到图片的ile了
    that.update(file);
   }, 1000);
  },
  update(file) {
   // 上传照片
   // 这里很简单 就是上传的逻辑 根据自己需要进行修改
   let self = this;
   let param = new FormData();
   param.append("resourceFile", file);
   let config = {
    headers: { "Content-Type": "multipart/form-data", ...self.headers },
   }; // 添加请求头
   axios.post(self.uploadUrl, param, config).then((res) => {
    if (res.data.code === 200) {
     self.$emit("uploadSuccess", { imgUrl: res.data.data }); // 回传数据!
    }
   });
  },
 },
};
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。