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 ...
随机推荐
- js某时间与当前时间差
function minuteFormat(min){ if(!min){ return '-'; } var result=''; if(min%(60*24*30*12)!=min){ resul ...
- How to using expression setup BackgroundColor AX2012 SSRS Report[AX2012]
tile label using [#99ccff] property BackgroundColor - > expression =Iif(Fields!Flag.Value = " ...
- 转载：Pycharm的常用快捷键
一直想着找一下pycharm的快捷键,但是每次都忘记找了,这次刚好碰到一个很全的,就直接借用别人的来当作自己的笔记ba 转载来源:https://www.cnblogs.com/liangmingsh ...
- PHP-Parse 简介以及在 Hyperf 中的应用
介绍 PHP-Parse 是分析 PHP 代码生成 AST 的库,分析出可读性很高的对象数据结构,方便后续的更新和遍历. PHP-Parse 的主要作用是修改原有代码(比如插入自定义的代码片段),生成 ...
- Zabbix + Cloud Alert 实践分享
前言 如果要问老牌开源监控工具泰斗,当zabbix莫属.之前已分享过 [Kubernetes+Promethues+Cloud Alert实践分享],本篇将继续分享 Zabbix + Cloud Al ...
- http 结构初始化
简要而说:accept 到连接后 根据fd 构建一个connection 由于是 http : 重新封装为http-connection:同时设置fd的读回调: 回调函数根据是否是https/htt ...
- Socket accept 简要分析
accept 用于从指定套接字的连接队列中取出第一个连接,并返回一个新的套接字用于与客户端进行通信,示例代码如下 #include <sys/types.h> /* See NOTES * ...
- spark-submit提交python脚本过程记录
最近刚学习spark,用spark-submit命令提交一个python脚本,一开始老报错,所以打算好好整理一下用spark-submit命令提交python脚本的过程.先看一下spark-submi ...
- Apache Shiro (Shiro-550)(cve_2016_4437)远程代码执行 - 漏洞复现
0x00 漏洞原理 Apache Shiro框架提供了记住密码的功能(RememberMe),用户登录成功后会生成经过加密并编码的cookie.在服务端对rememberMe的cookie值, 先ba ...
- 基于gin的golang web开发：中间件
gin中间件(middleware)提供了类似于面向切面编程或路由拦截器的功能,可以在请求前和请求之后添加一些自定义逻辑.实际开发中有很多场景会用到中间件,例如:权限验证,缓存,错误处理,日志,事务等 ...