使用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动画效果抖动解决方法
Sep 03 HTML / CSS
详解CSS3伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 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
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
python uuid模块使用实例
2015/04/08 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Pytorch释放显存占用方式
2020/01/13 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
违反学校规定检讨书
2014/01/18 职场文书
出国留学计划书
2014/04/27 职场文书
合作协议书格式
2014/08/19 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android