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 ...
随机推荐
- 【Android Studio】安卓开发初体验3.1——UI设计之常用控件
常用控件 首先对xml文件的编辑有三种模式 Code为纯代码 Split是一边代码,一边预览效果图 Designer就是有UI设计界面 TextView 用于在界面上显示一段文本信息 所有控件都可以在 ...
- XJOI NOIP501/511训练22 ttt学字符串
ttt学字符串 题目大意 大法师ttt 最近在学习字符串,有一天他看到魔力xtx左手拿着A字符串,右手拿着B字符串,两个字符串的长度都是一样的,而且都由abc三种字符构成,大法师ttt的灵力值为C,现 ...
- 转：Microsoft Dynamics AX内部版本号概述
Overview of Microsoft Dynamics AX build numbers 转自:https://community.dynamics.com/ax/b/axsupport/arc ...
- c++11-17 模板核心知识（一）—— 函数模板
1.1 定义函数模板 1.2 使用函数模板 1.3 两阶段翻译 Two-Phase Translation 1.3.1 模板的编译和链接问题 1.4 多模板参数 1.4.1 引入额外模板参数作为返回值 ...
- 80386学习（一） 80386CPU介绍
一.80386CPU介绍 Inter80386CPU是Inter公司于1985年推出的第一款32位80x86系列的微处理器.80386的数据总线是32位的,其地址总线也是32位,因而最大可寻址4GB的 ...
- Mybatis的二级缓存、使用Redis做二级缓存
目录 什么是二级缓存? 1. 开启二级缓存 如何使用二级缓存: userCache和flushCache 2. 使用Redis实现二级缓存 如何使用 3. Redis二级缓存源码分析 什么是二级缓存? ...
- Spring Cloud 整合分布式链路追踪系统Sleuth和ZipKin实战，分析系统瓶颈
导读 微服务架构中,是否遇到过这种情况,服务间调用链过长,导致性能迟迟上不去,不知道哪里出问题了,巴拉巴拉....,回归正题,今天我们使用SpringCloud组件,来分析一下微服务架构中系统调用的瓶 ...
- CSS圣杯布局、双飞翼布局详解
三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...
- 一文解析TCP/UDP
声明:本文部分内容来自互联网.书籍等渠道,表示感谢: 转载请注明出处:@热风.https://www.cnblogs.com/refeng/p/13996657.html 目录 TCP/UDP详解 1 ...
- ubuntu配置简单的DNS服务器
之所以说是简单的服务器,实现的功能很简单,通过这个dns server 查询制定域名的时候,能够根据设置的值来返回IP,当前的需求是需要轮询的返回IP DNS 轮询机制会受到多方面的影响,如:A记录的 ...