JS如何上传视频后从视频截图到一张封面Cover？

Jacob程序员

已于 2024-04-24 17:27:58 修改

阅读量688

点赞数 10

分类专栏：大前端进阶文章标签： javascript 音视频前端

于 2024-01-28 15:08:05 首次发布

本文链接：https://blog.csdn.net/weixin_45609702/article/details/135895599

版权

大前端进阶专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

- 概要
- 获取上传视频文件截图
- 小结

概要

从上传视频文件中获取一张图片

获取上传视频文件截图

html片段，两个都是隐藏的

<!--自定义的上传视频标签-->
 <input type="file" style="display: none" id="file" ref="uploadVideo" accept="video/*"
                       @change="uploadVideoClick($event)"/>
 <!--非常重要这个标签-否则获取不到图片-->
 <canvas ref="canvas" style="display: none;"></canvas>

js片段


  //截图第一帧转成/png图片
        const video = document.createElement('video');
        const canvas = this.$refs.canvas;
        const context = canvas.getContext('2d');

        video.src = URL.createObjectURL(file);
        video.addEventListener('loadedmetadata', () => {
          video.currentTime = 0; // 设置视频当前时间为第0秒
          video.addEventListener('seeked', () => {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
            //base64转Blob
            const imgFile = dataURLtoFile(canvas.toDataURL('image/jpeg'))
            //上传封面
            const formData = new FormData()
            formData.append('file', imgFile) // 传入bpmn文件
            //后端上传封面的接口
            uploadCover(formData).then(res => {
              if (res.code === 200) {
                this.userInfo.coverImg = res.dataMap.url
              } else {
                meassageError(res.msg)
              }
            })
          });
        })

base64转Blob

export function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type: mime});
}