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, // 视频宽度 单位为pxvideoH: 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><canvasid="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() {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>

写在最后

首先感谢你认真看完了这篇文章!
如果使用过程中有疑问可以随时来问, 一般看到我这边都会尽快回复的, 之前从上家公司个跳槽了, 最近在新公司比较忙. 之发前的无感打印我还是会定期维护, 感谢大家关注~~

Vue 视频截取第一帧图片-组件相关推荐

查看视频的IPB帧，IPB帧编码顺序，视频的第一帧图片
> 如何查看视频的IPB帧 Android, 如何获取视频的每一帧的信息视频 = 图片.图像(摄像头) + 声音(麦克风) : 谷歌官方给我们的提供的api接口类:MediaMetadataR ...
如何获取网络视频（或者说后台返回视频URL）第一帧图片以及获取本地视频的第一帧图片
在项目开发的时候,有可能会有这样的一种需求:有一段视频需要展示给用户,在界面上先展示视频上的某一帧图片,用户点击的时候再去获取视频资源进行播放.这时,服务器会先给我们返回视频的url,这个时候就需要通 ...
【前端】wangeditor源码修改，打包发布到npm，实现上传视频功能，得到视频的第一帧保存为封面，spring-boot+vue，axios实现文件上传，视频图片浏览
一.实现 1.创建git分支,clone下源码 git地址创建分支 2.图片上传具有文件选择的功能,所以我完全模仿(抄袭)图片上传报错不慌,全部改完就不报错了 1)在src/config/inde ...
php 获取视频首帧,PHP获取视频的第一帧与时长
//获得视频文件的缩略图 function getVideoCover($file,$time,$name) { if(empty($time))$time = '1';//默认截取第一秒第一帧 $s ...
java 取视频第一帧,java获取视频的第一帧
//------------maven配置文件--------------- org.bytedeco javacv 0.8 /** * 获取指定视频的帧并保存为图片至指定目录 * @param vi ...
php截取视频第一帧为图片,把视频变成一帧一帧的图片(ae怎么把视频变成单帧) 视频截图视频画面每帧图片截取...
AE怎么把视频变成单帧?这是小编今天要与大家讨论及解决的一个问题.在视频后期处理中,有时为实现某个场景效果,需要把视频中的某帧变成静态帧图片:或者需要视频截图视频画面每帧图片截取出来,把视频变成一帧一 ...
canvas截取多个视频的第一帧，第n秒画面
业务涉及视频预览,不点击视频则不播放而是先展示视频的画面给到用户 "因为本人特别喜欢梅艳芳,所以也留存了很多她的视频,这里就以她的视频做测试了" 截取多个视频的第一帧,使用:Pro ...
h5 video 移动端视频添加第一帧作为播放前图片
第一步:添加视频video标签,添加src, poster,controls属性第二步:poster = src的值 + '?vframe/jpg/offset/1' 这样就可以显示视频第一帧图片了 ...
关于Unity VideoPlayer组件视频切换第一帧卡顿
关于Unity VideoPlay组件视频切换第一帧卡顿的问题 1.问题: 在做项目时,发现VideoPlayer组件在多个视频切换时,会在第一帧重复上个视频的结束时的画面. 2.原因: 因为Vid ...

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

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