js实现视频截图,视频批量截图,canvas实现
截取视频的某一时间的图像并保存
利用canvas的绘画能力画出视频某一帧的视频画面, 获得到图像之后转换成base64图像, 再利用a标签的实现自动保存到本地
- html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频截图保存到本地</title>
</head>
<body>
<div><button id="btn">开始截图</button></div>
<img id="img">
<a id="a" download="" style="display: none;">去下载</a>
</body>
</html>
- js代码
// 绑定下载
document.getElementById("btn").onclick = function() {
videoCover("视频地址", null, 400)
}
/**
* @param {String} src 视频链接
* @param {Number} width 视频容器播放的宽
* @param {Number} height 视频容器播放的高
* @param {Number} second 需要截图视频的帧数, 单位秒
* @param {Number} bufftime 视频加载缓冲的时长, 单位秒
*/
function videoCover(src, width, height, second, bufftime) {
const canvas = document.createElement('canvas'); // 创建canvas 用来截图
const video = document.createElement('video'); // 创建video 用来存放被截图的视频
const img = document.getElementById('img') // 用来显示截图的图片效果
const a = document.getElementById('a') // 用来自动下载图片保存到本地
video.setAttribute('crossOrigin', 'anonymous'); // 支持跨域
document.body.appendChild(video); // 把视频插入页面里
video.setAttribute('src', src); // 设置video路径
video.style.visibility = "hidden" // 视频不显示
// 监听视频播放
video.onplay = function() {
// 暂停
video.pause()
// 指定播放时间 1代表视频的第一秒帧 可以浮点数
video.currentTime = second || 1
// 设置视频容器的宽高播放 如果设置一项会自动按照比例生成 这里是高固定,宽自动
video.height = height || video.clientHeight;
// 设置canvas的截图大小,如果没给定宽高值会取视频容器的宽高
canvas.width = width || video.clientWidth;
canvas.height = height || video.height;
/*
使用定时器为了视频跳转到某一帧的时候视频进行缓冲,等视频加载完成之后进行截图
如果截图是黑屏说明视频未加载完成就开始截屏了
*/
setTimeout(() => {
// 使用canvas进行绘画 视频画面
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
// 获取到base64图片 png格式
const IMG_TYPE = "png"
const b64 = canvas.toDataURL('image/' + IMG_TYPE);
// 展示到页面上给img的src赋值
document.getElementById('img').setAttribute('src', b64);
// 设置下载图片地址
document.getElementById('a').setAttribute('href', b64);
// 设置下载图片的名称
const filename = "测试图" + "." + IMG_TYPE
document.getElementById('a').setAttribute('download', filename);
// 模拟点击自动下载图片
document.getElementById('a').click()
// 移除视频容器
document.body.removeChild(video);
}, bufftime * 1000 || 3000);
}
// 当视频准备就绪的时候
video.onloadeddata = () => {
// 播放它
video.play()
}
}
以上代码就完成了单个的视频截图了.
- 如何实现多个视频批量截图视频呢?
使用for循环遍历 调用 videoCover 函数, videoCover 需要重写一下.
先规定需要遍历视频截图的内容
[
{
"src":"*******.video", // 视频下载地址
"currentTime":5, //需要截取的视频帧数,第几秒
"filename":"测试1", // 需要下载到本地的文件名
"filetype":"png" // 下载的图片类型
},
{
"src":"*******.video", // 视频下载地址
"currentTime":5, //需要截取的视频帧数,第几秒
"filename":"测试1", // 需要下载到本地的文件名
"filetype":"png" // 下载的图片类型
}
]
- 重写
videoCover函数
使用
promise,async,await遍历循环截图下载图片
/**
* @param {Object} obj 视频内容对象
* @param {Number} width 视频容器播放的宽
* @param {Number} height 视频容器播放的高
* @param {Number} bufftime 视频加载缓冲的时长, 单位秒
*/
function videoCover(obj, width, height, bufftime) {
return new Promise((resolve, reject) => {
const canvas = document.createElement('canvas'); // 创建canvas 用来截图
const video = document.createElement('video'); // 创建video 用来存放被截图的视频
const img = document.getElementById('img') // 用来显示截图的图片效果
const a = document.getElementById('a') // 用来自动下载图片保存到本地
video.setAttribute('crossOrigin', 'anonymous'); // 支持跨域
document.body.appendChild(video); // 把视频插入页面里
video.setAttribute('src', obj.src); // 设置video路径
video.style.visibility = "hidden" // 视频不显示
// 监听视频播放
video.onplay = function () {
// 暂停
video.pause()
// 指定播放时间 1代表视频的第一秒帧 可以浮点数
video.currentTime = obj.currentTime || 1
// 设置视频容器的宽高播放 如果设置一项会自动按照比例生成 这里是高固定,宽自动
video.height = height || video.clientHeight;
// 设置canvas的截图大小,如果没给定宽高值会取视频容器的宽高
canvas.width = width || video.clientWidth;
canvas.height = height || video.height;
/*
使用定时器为了视频跳转到某一帧的时候视频进行缓冲,等视频加载完成之后进行截图
如果截图是黑屏说明视频未加载完成就开始截屏了
*/
setTimeout(() => {
// 使用canvas进行绘画 视频画面
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
// 获取到base64图片 png格式
const b64 = canvas.toDataURL('image/' + obj.filetype);
// 移除视频容器
document.body.removeChild(video);
resolve(b64)
}, bufftime * 1000 || 3000);
}
// 当视频准备就绪的时候
video.onloadeddata = () => {
// 播放它
video.play()
}
})
}
- 在写个循环遍历
videoCover函数
async function start() {
const DATA = [{
"src": "http:/****.mp4", // 视频下载地址
"currentTime": 5, //需要截取的视频帧数,第几秒
"filename": "测试1", // 需要下载到本地的文件名
"filetype": "png" // 下载的图片类型
},
{
"src": "http:/****.mp4", // 视频下载地址
"currentTime": 2, //需要截取的视频帧数,第几秒
"filename": "测试2", // 需要下载到本地的文件名
"filetype": "png" // 下载的图片类型
}]
const img = document.getElementById('img') // 用来显示截图的图片效果
const a = document.getElementById('a') // 用来自动下载图片保存到本地
for (let index = 0; index < DATA.length; index++) {
const element = DATA[index];
console.log("开始截图视频:" + element.src);
const b64 = await videoCover(element, null, 400, 3)
// 展示到页面上给img的src赋值
img.setAttribute('src', b64);
// 设置下载图片地址
a.setAttribute('href', b64);
// 设置下载图片的名称
const filename = element.filename + "." + element.filetype
a.setAttribute('download', filename);
// 模拟点击自动下载图片
a.click()
console.log("截图保存到本地成功:命名<" + filename + ">");
}
console.log("所有视频截图下载本地完成!");
}
// 绑定下载
document.getElementById("btn").onclick = function () {
start()
}
然后点击按钮去截图,就可以开始批量截图视频保存到本地了.
提示: async/await属于es7语法,部分低版本浏览器暂不支持,需要前往高版本浏览器使用!
js实现视频截图,视频批量截图,canvas实现的更多相关文章
- 教你一步一步用 Node.js 制作慕课网视频爬虫
转自:http://www.jianshu.com/p/d7631fc695af 开始 这个教程十分适合初学 Node.js 的初学者看(因为我也是一只初学的菜鸟~) 在这里,我就默认大家都已经在自己 ...
- Win+PHP+IECapt完整实现网页批量截图并创建缩略图
最近在开发一个本地互联网应用的项目,为了增加用户体验,需要在搜索结果左侧显示如图一所示的某个网站的缩略图效果,在网上不停地百度谷歌了一上午后,发现大多数实现少量截图还是可以的,如果大批量的截图总会在中 ...
- iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 错误处理
沪江CCtalk视频地址:https://www.cctalk.com/v/15114923887518 处理错误请求 爱能遮掩一切过错. 当我们在访问一个站点的时候,如果访问的地址不存在(404), ...
- iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 记录日志
沪江CCtalk视频地址:https://www.cctalk.com/v/15114923883523 log 日志中间件 最困难的事情就是认识自己. 在一个真实的项目中,开发只是整个投入的一小部分 ...
- iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 解析JSON
视频地址:https://www.cctalk.com/v/15114923886141 JSON 数据 我颠倒了整个世界,只为摆正你的倒影. 前面的文章中,我们已经完成了项目中常见的问题,比如 路由 ...
- iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 处理静态资源
视频地址:https://www.cctalk.com/v/15114923882788 处理静态资源 无非花开花落,静静. 指定静态资源目录 这里我们使用第三方中间件: koa-static 安装并 ...
- iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 视图Nunjucks
视频地址:https://www.cctalk.com/v/15114923888328 视图 Nunjucks 彩虹是上帝和人类立的约,上帝不会再用洪水灭人. 客户端和服务端之间相互通信,传递的数据 ...
- iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 代码分层
视频地址:https://www.cctalk.com/v/15114923889408 文章 在前面几节中,我们已经实现了项目中的几个常见操作:启动服务器.路由中间件.Get 和 Post 形式的请 ...
- 使用you-get下载视频网站视频或其他
使用you-get下载视频网站视频或其他 文/玄魂 目录 使用you-get下载视频网站视频或其他 前言 1.1 下载.安装 依赖 exe安装 pip安装 Antigen安装 Git 克隆源码 Hom ...
随机推荐
- GANSS 87C键盘在Linux无法正常使用的解决办法
前几天在狗东入手可以一把GANSS的87C键盘,满心欢喜拆开来用却发现在开发电脑(Deepin和ubuntu)上F1-F12都不能正常使用,这对一个搞web开发的人来说,无疑是要了我的老命,无奈找各种 ...
- Docker（4）- Docker 命令大全
如果你还想从头学起 Docker,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1870863.html 容器生命周期管理 run sta ...
- GAMES101系列笔记一 图形学概述与线性代数入门
概述+线性代数 为什么学习图形学? Computer Graphics is AWESOME! 主要涉及内容: 光栅化 曲线和网格 光线追踪 动画与模拟 Differences between CG ...
- linux常用命令和系统基本目录
Linux 基础命令及基本目录 一.网卡 1.网卡配置文件路径 /etc/sysconfig/network-scripts/ifcfg-eth0 配置文件: TYPE=Ethernet # 以太 ...
- # Maven:Could not transfer artifact org.springframework:spring-webmvc:pom:。。。（系统找不到文件），从网上clone到本地的项目报红
解决办法: 确保maven配置正确,在maven的setting.xml配置文件中, 配置本地仓库路径 <localRepository>D:\Maven\文件名</localRep ...
- /etc/resolv.conf文件自动恢复的解决方法
/etc/resolv.conf文件自动恢复的解决方法: service NetworkManager stop #后台进程关闭 chkconfig NetworkManager off #配置关闭, ...
- 面试都要问的Spring MVC
MVC总结 1. 概述 还是之前的三个套路 1.1 是什么? Spring提供一套视图层的处理框架,他基于Servlet实现,可以通过XML或者注解进行我们需要的配置. 他提供了拦截器,文件上传,CO ...
- 对udp dns的一次思考
目前昨天查一个线上问题:""dns服务器在我们的设备, 有大量的终端到设备上请求解析域名,但是一直是单线程,dns报文处理不过来", 然而设备是多核,dns服务器一直不能 ...
- 02 Filter过滤器
Filter 一.Filter过滤器 Filter过滤器它是JavaWeb的三大组件之一.三大组件分别是:Servlet程序.Listener监听器.Filter过滤器 Filter过滤器是JavaE ...
- arm64大服务器安装ubuntu18看不到安装界面
前言 最近在使用arm的大服务器需要用到ubuntu相关的一些东西,在操作系统安装过程中遇到了一些问题 记录 华为鲲鹏服务器 这个默认安装centos的都很顺利,安装ubuntu18最新的,impi就 ...