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 ...
随机推荐
- 2、Django源码分析之启动wsgi发生了哪些事
一 前言 Django是如何通过网络socket层接收数据并将请求转发给Django的urls层? 有的人张口就来:就是通过wsgi(Web Server Gateway Interface)啊! D ...
- HTML5 实现的一个俄罗斯方块实例代码
/*实现的功能:方块旋转(W键).自动下落.移动(ASD).消行.快速下落(空格键).下落阴影.游戏结束.*/ <!DOCTYPE html> <html> < ...
- day87:luffy:结算页面积分&支付宝接口
目录 1.积分 2.支付 1.积分 1.关于积分的表结构 1.在user表中添加credit字段 + 设计一个积分的表结构 user/models.py class User(AbstractUser ...
- http代理阅读3 发送mem处理
每次客户端有可读数据触发时,优先检测是否还有数据没有发送,如果有则发送数据,然后在读取client数据 //向后端发送请求的调用过程 //ngx_http_upstream_send_request_ ...
- pycharm 报错及解决方法
1.报错: AttributeError: 'list' object has no attribute 'click' 原因:应是find_element_by 不是 find_elements_b ...
- 使用 JavaScript 操作浏览器历史记录 API
History 是 window 对象中的一个 JavaScript 对象,它包含了关于浏览器会话历史的详细信息.你所访问过的 URL 列表将被像堆栈一样存储起来.浏览器上的返回和前进按钮使用的就是 ...
- Java解释单链表中的头插法以及尾插法
单链表属于数据结构中的一种基本结构,是一种线性结构,在此使用Java对其中的头插法以及尾插法进行解释. 首先定义好链表中的节点类: 其中,data代表节点所存放的数据,next代表指向下一节点 对于单 ...
- To the Max(动态规划)
Description Given a two-dimensional array of positive and negative integers, a sub-rectangle is any ...
- C++ const的自我理解
C++学习笔记–const const 是 constant 的缩写,本意是不变的,不易改变的意思.在 C++ 中是用来修饰内置类型变量,自定义对象,成员函数,返回值,函数参数. C++ const ...
- vue路由懒加载方式
方式一:结合Vue的异步组件和Webpack的代码分析 const Home = resole => {require.ensure(['../components/Home.vue'],() ...