您现在的位置是：网站首页> 编程资料编程资料

vue 如何获取视频第一帧_vue.js_

2023-05-24 289人已围观

简介 vue 如何获取视频第一帧_vue.js_

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") canvas.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 },

使用

 // 对应数据 > 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" }}