截取视频第一帧的核心流程是创建 video 元素,等待 loadeddata 或 seeked 事件触发后,把当前画面绘制到 canvas 上。
在 Vue 中可以把文件选择、视频加载、canvas 绘制封装成一个方法,拿到 Blob 后再生成预览地址或上传到服务端。
如果视频来自跨域地址,需要服务端正确设置 CORS 响应头,否则 canvas 会被污染,后续调用 toBlob 或 toDataURL 会失败。
技术笔记与实践记录
js、vue 如何截取视频第一帧,思路是将视频渲染到canvas,然后canvas转换成toBlob。
截取视频第一帧的核心流程是创建 video 元素,等待 loadeddata 或 seeked 事件触发后,把当前画面绘制到 canvas 上。
在 Vue 中可以把文件选择、视频加载、canvas 绘制封装成一个方法,拿到 Blob 后再生成预览地址或上传到服务端。
如果视频来自跨域地址,需要服务端正确设置 CORS 响应头,否则 canvas 会被污染,后续调用 toBlob 或 toDataURL 会失败。