17、canvas获取video视频流的图片

C.&H.

于 2021-08-05 17:48:12 发布

阅读量1k

点赞数

分类专栏：新知识笔记

本文链接：https://blog.csdn.net/sunnnnh/article/details/119423708

版权

canvas video 图像处理宽高比 drawImage

关键词由CSDN通过智能技术生成

新知识笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何在canvas上绘制video元素的截图，通过获取video的真实宽度和高度，计算宽高比，确保绘制的图片不会变形。示例代码展示了使用videoWidth和videoHeight设置canvas的drawImage方法参数，以600像素为基准宽度，保持比例绘制图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了保证获取的图片不变形，使用video真实宽高的比值来设置获取图片的宽高：

var canvas= document.querySelector('canvas');
var ctx = canvas.getContext("2d");

var video = document.querySelector('video');

let width = this.videoWidth; //video的真实宽
let height = this.videoHeight; //video的真实高
let radio = height / width;
ctx.drawImage(video,0,0,600,radio*600) //截取video视频流中的图片
//600,radio*600 分别对应宽高