Nothing is impossible.

技术笔记与实践记录

‹ 返回文章列表

js、vue 如何截取视频第一帧

js、vue 如何截取视频第一帧,思路是将视频渲染到canvas,然后canvas转换成toBlob。

vue JavaScript
◷ 2年前 ◉ 993 ☁ 0

截取视频第一帧的核心流程是创建 video 元素,等待 loadeddata 或 seeked 事件触发后,把当前画面绘制到 canvas 上。

在 Vue 中可以把文件选择、视频加载、canvas 绘制封装成一个方法,拿到 Blob 后再生成预览地址或上传到服务端。

如果视频来自跨域地址,需要服务端正确设置 CORS 响应头,否则 canvas 会被污染,后续调用 toBlob 或 toDataURL 会失败。