vue、js截取视频任意一帧图片

最新推荐文章于 2024-08-07 16:41:51 发布

小一梦

最新推荐文章于 2024-08-07 16:41:51 发布

阅读量1.2k

点赞数 5

分类专栏： vue javascript 前端文章标签： javascript vue.js 音视频

本文链接：https://blog.csdn.net/weixin_43728978/article/details/140497054

版权

前端同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

vue

20 篇文章 1 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

html有本地上传替换部分，可以不看

原理：通过video标签对视频进行加载，随后使用canvas对截取的视频帧生成需要的图片

<template>
<el-row  :gutter="18"  class="preview-video">
          <h4>视频预览<span>系统默认选中第一帧为封面</span></h4>
          <div class="screenshot-box">
            <video
              :class="`screenshot-video screenshot-video${id}`"
              :src="videoUrl"
              controls
              crossorigin="anonymous"
            />
          </div>
          <div class="preview-btn">
            <el-button size="small" type="primary" class="set-btn" @click="setWidthHeight">截取封面</el-button>
              <el-upload
                action=""
                :key="componentImgKey"
                :on-change="handleAddLocalImage"
                accept=".jpg,.png,.jpeg,.JPG,.PNG,.JPEG"
                :auto-upload="false"
                :show-file-list="false"
                :limit="1"
                :multiple="false"
                ref="uploads"
              >
                <el-button @click.native="handleAddLocalImageBefore" size="small" type="primary">本地上传</el-button>
              </el-upload>
          </div>
          <canvas
            :class="`myCanvas${id}`"
            class="myCanvas"
            :width="isWidth"
            :height="isHeight"
          />
        </el-row>
      </template>
<script>
export default {
	data(){
	return {
		videoUrl:"",
      id: 0,
      isWidth: 320,
      isHeight: 180,
      imgSrc:"",
	},
	methods:{
		setWidthHeight() {
	      if (true) {
	        this.$nextTick((_) => {
	          var v = document.querySelector(`.screenshot-video${this.id}`);
	          this.isWidth = v.offsetWidth;
	          this.isHeight = v.offsetHeight;
	          this.cutPicture();
	        });
	      }
	    },
	    //截取当前帧的图片
    cutPicture() {
      if (process.browser) {
        this.$nextTick((_) => {
          var v = document.querySelector(`.screenshot-video${this.id}`);
          let canvas = document.querySelector(`.myCanvas${this.id}`);
          var ctx = canvas.getContext("2d");
          ctx.drawImage(v, 0, 0, this.isWidth, this.isHeight);
          var oGrayImg = canvas.toDataURL("image/png");
          this.imgSrc = oGrayImg;
          this.file_ext="png"
          let size=this.imageSize(oGrayImg)/1024/1024
          if(size>2){
            this.$message.error("图片大小不能超过2MB！")
            return
          }
        });
      }
    },
    imageSize(base64Str) {
      const indexBase64 = base64Str.indexOf('base64,');
      if (indexBase64 < 0) return -1;
      const str = base64Str.substr(indexBase64 + 6);
      return (str.length * 0.75).toFixed(2);
    },
	}
}
</script>