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

2024-11-2 22:36| 发布者: 2ae29| 查看: 47| 评论: 0

摘要: 前言本次利用的是canvas.drawImage()实现截图功能, 关于api支持的dom元素、根本参数，可点击查询下面连接 CanvasRenderingContext2D.drawImage() 处理惩罚过程我本次的需求是多人视频中对某一视频某一刻的截图，展

前言

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

处理惩罚过程

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

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

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

2、截图的像素巨细及优化

devicePixelRatio 可以大概返回当前表现装备的物理像素分辨率与 CSS 像素分辨率的比率，可以大概更好还原真实的视频场景，详细参考官方

[code] const ratio = window.devicePixelRatio || 1; canvasCtx.scale(ratio, ratio);[/code]

3、处理惩罚canvas画布

[code] // canvas巨细与图片巨细保持一致，截图没有多余 canvas.width = video.offsetWidth * ratio; canvas.height = video.offsetHeight * ratio;[/code]

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

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

到此这篇关于利用canvas对video视频某一刻截图的文章就介绍到这了,更多相干canvas视频截图内容请搜索脚本之家从前的文章或继续欣赏下面的相干文章，希望各人以后多多支持脚本之家！

来源：https://www.jb51.net/html5/790425.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：html5笛卡尔心形曲线的实现下一篇：Canvas如何做个雪花屏版404的实现

账号		自动登录	找回密码
密码			立即注册

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

前言

处理惩罚过程

相关分类

站长推荐 /6