截取视频第一帧，截取第一帧做封面图

最新推荐文章于 2024-06-07 16:43:51 发布

oneyJiang

最新推荐文章于 2024-06-07 16:43:51 发布

阅读量7k

点赞数

CC 4.0 BY-SA版权

分类专栏： canvas 文章标签： canvas 截取图片视频转canvas canvas截取图片

(cc) OneiJiang

本文链接：https://blog.youkuaiyun.com/jw19950424/article/details/79456348

canvas 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML5的canvas元素从视频帧中捕获图像并将其转换为PNG格式的方法。通过简单的JavaScript代码实现，可以轻松地从正在播放的视频中获取静态图像。

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

话不多说，上代码

 
<input type="file" id="input" @change="chooseVideoInput" class="uploadVideo_input">

var video = document.getElementById("video");
var canvas = document.createElement("canvas");

var scale = 1;
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img"); // 创建img
img.src = canvas.toDataURL("image/png"); // 设置图片src



// src为截取之后的图片路径，