使用canvas对video视频某一刻截图功能


Posted in HTML / CSS onSeptember 25, 2021

前言

本次使用的是canvas.drawImage()实现截图功能, 关于api支持的dom元素、基本参数,可点击查询下面连接 CanvasRenderingContext2D.drawImage()

处理过程

我本次的需求是多人视频中对某一视频某一刻的截图,展示视频直接用的原生video标签

1、首先获取video元素和创建canvas

const video = document.getElementById('video');
const canvas = document.createElement("canvas");
const canvasCtx = canvas.getContext("2d")

2、截图的像素大小及优化

devicePixelRatio 能够返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率,能够更好还原真实的视频场景,具体参考官方

const ratio = window.devicePixelRatio || 1;
canvasCtx.scale(ratio, ratio);

3、处理canvas画布

// canvas大小与图片大小保持一致,截图没有多余
canvas.width = video.offsetWidth * ratio;
canvas.height = video.offsetHeight * ratio;

4、生成canvas并转化成自己需要的格式,我这里就直接转成base64了
 

canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height)
const imgBase64 = canvas.toDataURL("image/png");

到此这篇关于使用canvas对video视频某一刻截图的文章就介绍到这了,更多相关canvas视频截图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
HTML5新标签兼容——> 的两种方法
Sep 12 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
sass 常用备忘案例详解
Sep 15 #HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 #HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 #HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 #HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 #HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 #HTML / CSS
You might like
Zerg基本策略
2020/03/14 星际争霸
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
使用python统计文件行数示例分享
2014/02/21 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
简单了解Python中的几种函数
2017/11/03 Python
python爬虫使用cookie登录详解
2017/12/27 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
python变量的作用域是什么
2020/05/26 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
置业顾问岗位职责
2014/03/02 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
浅析Python中的套接字编程
2021/06/22 Python