前端js实现从视频中提取图片帧

使用canvas进行视频截图。

<div class="dashboard-container"><div style="display: flex"><el-input v-model="videoUrl" placeholder="请输入视频地址"></el-input><el-button @click="captureVideo(3)" type="success">截取</el-button><el-button @click="clearImg()" type="warning">清空图片</el-button></div><div style="display: flex;flex-wrap: wrap;margin-top: 10px"><video :src="videoUrl" id="video" controls="controls" crossorigin="anonymous" playsinline autoplay muted loop></video><img class="img" v-for="(item) in imgList" :src="item"/></div>
</div>

captureVideo(w) {if(this.videoUrl == ''){this.$message.warning("请先输入视频地址");return;}let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");canvas.width = video.videoWidth;canvas.height = video.videoHeight;let img = document.createElement("img");ctx.drawImage(video, 0, 0, canvas.width, canvas.height);if(w == 1) return;this.imgList.push(canvas.toDataURL('image/png'));},clearImg(){this.$confirm('确认清空已截图片?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.imgList = [];this.$message({type: 'success',message: '已清空!'});}).catch(() => {this.$message({type: 'info',message: '已删除'});});}

#video{width: 300px;
}
.img{width: 300px;margin-left: 10px;
}

测试地址
http://jdhnv787.xyz/JYeontu/#/getCover

前端js实现从视频中提取图片帧相关推荐

从视频中提取图片（截取ppt）
从视频中提取图片大聪明2.0上线本文将介绍如何快速从网课视频中提取ppt Step1 从视频中提取图片使用win自带的"电影与电视" 点击这个小铅笔,选择"保存视频 ...
FFmpeg命令(三)、从视频中提取图片
FFmpeg 从视频中提取图片 ffmpeg -i test.mp4 -r 30 image-%3d.jpg ffmpeg -i test.mp4 -r 30 -t 4 image-%3d.jpg f ...
python根据视频帧按秒从视频中提取图片
看到有按照帧提取视频中的图片的例子,但是个人只需用到每秒的图片. 以下是用到的代码: import os import cv2def save_img2(): # 提取视频中图片按照每秒提取间隔是 ...
ffmpeg从视频中提取图片
ffmpeg -i test.mp4 -r 30 image-%3d.jpg ffmpeg -i test.mp4 -r 30 -t 4 image-%3d.jpg ffmpeg -i test.mp ...
php 获取视频首帧,从视频中提取特定帧的最快方法(PHP/ffmpeg/anything)
当然你可以编写一些C/C++和链接到-lav *,基本上创建一个简化版本的ffmpeg只是用于提取框架,甚至可以做一个php扩展(也不会运行它作为同一个用户,更不用说在同一个过程中).但结果是不太可能 ...
python提取图片文字视频教学_用Python提取视频中的图片
小编自己码的通用型函数,支持各种常用视频格式,可满足常用需求,亲测效果和速度都不错. 想获取本文数据和完整代码的下载链接,请关注微信公众号"R语言和Python学堂",并回复发文日 ...
c# 保存html中的图片,c# HTML中提取图片地址
public class HtmlHelper { /// /// HTML中提取图片地址 /// public static List PickupImgUrl(string html) { Reg ...
python一帧一帧读取视频_用Python从视频中提取每一帧的图片
大家应该都有这样的情况:在看到某些视频的画面时感觉美如画,想截取下来却又烦于截图的繁琐,现在我就教大家使用Python提取视频中每一帧的画面,让大家不错过每一个精彩的瞬间! •语言:Python •所 ...
视频剪辑教你同时操作提取多个视频中的图片随机抽出某一帧保存
很多朋友不知道怎么操作同时提取多个视频中的图片,认为操作会很复杂,其实很简单,按照小编分享的这个方法,就可以实现多个视频批量操作完成图片的提取并保存,感兴趣的朋友接着往下看吧! 第一步,运行媒体梦工厂 ...

前端js实现从视频中提取图片帧

前端js实现从视频中提取图片帧相关推荐

最新文章

热门文章