首页 > 其他分享 >在element-ui视频上传使用canvas截取视频帧数,并且转为视频封面。

在element-ui视频上传使用canvas截取视频帧数,并且转为视频封面。

时间:2023-06-28 17:22:52浏览次数:35  
标签:视频 canvas const url base64 element video


<el-upload :http-request="getFile"//自定义上传 action :on-change="handleFileChange"//监听文件上传 ref="upload" accept="video/*"//定义格式为视频 > <el-button icon="el-icon-plus" size="small">导入</el-button> </el-upload>
  1. 在 Vue 实例中定义 handleFileChange 方法来处理文件改变事件。当选择一个视频文件后,handleFileChange 方法将被触发。该方法会创建一个 FileReader 对象来读取视频文件并将其转成 data URL。接着,captureVideoFrame 方法会被调用,传入视频的 data URL。在 captureVideoFrame 方法中,我们创建一个新的 video 元素,并加载视频的 data URL。一旦视频元数据加载完成,就会触发 onloadedmetadata 事件,该事件处理程序将创建一个 canvas 元素,并在其中绘制视频的第一帧图像。最后,我们可以通过调用 toDataURL 方法将画布上的图像数据转换为 base64 格式。
    handleFileChange(file) {
      this.$refs.upload.clearFiles();
      const reader = new FileReader();
      reader.onload = event => {
        this.captureVideoFrame(event.target.result);
      };
      reader.readAsDataURL(file.raw);
    },
    captureVideoFrame(videoDataUrl) {
      const video = document.createElement("video");
      video.src = videoDataUrl;
      video.onloadedmetadata = () => {
        const canvas = document.createElement("canvas");
        const { videoWidth, videoHeight } = video;
        canvas.width = videoWidth;
        canvas.height = videoHeight;

        // 在视频播放到指定时间后截取画面
        const snapshotTime = 1; // 截取时间点(单位:秒)
        video.currentTime = snapshotTime;

        video.onseeked = () => {
          // 绘制视频当前时间点的画面到画布上
          canvas
            .getContext("2d")
            .drawImage(video, 0, 0, videoWidth, videoHeight);
          const imageDataUrl = canvas.toDataURL("image/jpeg");
          // 将 base64 格式的图像数据用于显示或上传
          const url = this.data64toFile(imageDataUrl);
          this.coverUrl = url;
          this.coverList.push({ url: url, flag: true });
          console.log(this.coverList, "视频截图");
        };
        // 将 base64 格式的图像数据用于显示或上传
      };
    },
//对拿到的base64编码转为blob data64toFile(base64URL) { const arr = base64URL.split(","); const mime = arr[0].match(/:(.*?);/)[1]; const bstr = atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } const blob = new Blob([u8arr], { type: mime }); const url = URL.createObjectURL(blob); return url; },

 

标签:视频,canvas,const,url,base64,element,video
From: https://www.cnblogs.com/lyq1714/p/17511973.html

相关文章

  • 免费体验Stable Diffusion deforum文转视频插件,还有deforum API 接口部署介绍!
    如何使用ServerlessDevs和函数计算快速体验部署StableDiffusion,这个是小白也能简单体验安装部署的教程.有电脑就能操作,依托阿里云原生服务.不用考虑硬件问题本篇主要讲解怎么安装跟部署自定义安装插件跟模型.以deforum文转视频插件举例.deforumapi接口自定义开发镜像定......
  • vue-element table表格排序推拽功能
    //1.安装sortablejsnpminstallsortablejs--save//2.功能页面中引入importSortablefrom‘sortablejs’具体使用(注意:elementtable务必指定row-key,且row-key必须是唯一的,如id,不然会出现排序不对的情况)<el-tablerow-key="id":data="tableData"style="width:......
  • element-ui 去除input的框
    ::v-deep{.el-input__inner{border:0;border-radius:0px;//&:focus{//border-bottom:1pxsolid#409eff;//}}.el-textarea__inner{resize:none;/*这个是去掉textarea下面拉伸的那个标志,如下......
  • QT性能优化实战 QML优化 QT高性能 QT6系列视频课程 QT6 性能优化实战 QT高性能 QT原理
      QT性能优化实战视频课程QT6Widgets高性能应用编程 1.课前考试2.字符串优化(上)3.字符串优化(下)4.绘图优化(上)5.绘图优化(下) 6.QT界面优化(上)7.QT界面优化(下)8.QT高性能统计图优化 9.QT高性能图形视图图元场景优化......
  • 斗鱼直播实现:你主播最爱的Android音视频开发
    一、直播的本质实时推送/拉取音视频数据二、视频直播流程视频直播的流程可以分为如下几步:(1)采集(2)处理(3)编码和封装(4)推流到服务器(5)服务器流分发(6)播放器流播放1、采集视频的采集涉及两方面数据的采集:音频采集和图像采集,它们分别对应两种完全不同的输入源和数据格式。(1)两个传感器:CCD:图像......
  • 挖掘“张琦们”短视频IP管理运营的隐秘知识
    提及火爆抖音的IP“商业顾问张琦老师”,相信大家并不陌生,作为抖音管理经营类视频代表性IP,张琦创造了现象级互联网营销的典例。随着互联网+快速发展以及产业经济结构转型对为从业者职业技能和素养提出更高的要求,社会开始提倡“终身学*”。*日,巨量引擎旗下内容消费趋势洞察品牌巨......
  • element-ui按需引入
    1.借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。首先,安装babel-plugin-component:npminstallbabel-plugin-component-D2.修改babel.config.jsmodule.exports={presets:['@vue/cli-plugin-babel/preset',["@babel/prese......
  • 限制Element ui日期选择器el-date-picker时间跨度为3个月
    处理Element日期选择器el-date-picker限制时间跨度3个月。主要通过pickerOptions里的disabledDate来控制禁止选中的日期。实现思想就是,当选中第一个开始日期时,拿到该时间戳计算时间范围,然后控制接下来选中时间在3个月以内,超过范围禁用掉。1、在template中使用el-date-pic......
  • 精彩纷呈!LLUG 2023 北京场活动回顾来啦 | 视频回放已上线
    导读:在6月11日、6月12日,由龙蜥社区联合Linux中国主办,人民邮电出版社支持的LLUG2023第一场活动在北京市北人亦创国际会展中心成功举办。本文转自Linux中国,作者Bestony,以下为本次LLUG活动回顾全文:本次活动分为三个不同的部分:Linux中国社区技术实践、龙蜥社区发展经......
  • PHP语言对接抖音快手小红书视频/图片去水印API接口的案例
    这篇文章主要介绍了PHP语言对接抖音快手小红书视频/图片去水印API接口的案例,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。以下为PHP语言调用去水印接口的示例,展示GET请求方式的调用方式。示例代码中用到的Uid和Toke......