526互联

在element-ui视频上传使用canvas截取视频帧数，并且转为视频封面。

发布时间 2023-06-28 17:17:26作者: 圣迭戈

 <el-upload
          :http-request="getFile"//自定义上传
          action
          :on-change="handleFileChange"//监听文件上传
          ref="upload"
          accept="video/*"//定义格式为视频
        >
          <el-button icon="el-icon-plus" size="small">导入</el-button>
 </el-upload>
  1. 在 Vue 实例中定义 handleFileChange 方法来处理文件改变事件。当选择一个视频文件后，handleFileChange 方法将被触发。该方法会创建一个 FileReader 对象来读取视频文件并将其转成 data URL。接着，captureVideoFrame 方法会被调用，传入视频的 data URL。在 captureVideoFrame 方法中，我们创建一个新的 video 元素，并加载视频的 data URL。一旦视频元数据加载完成，就会触发 onloadedmetadata 事件，该事件处理程序将创建一个 canvas 元素，并在其中绘制视频的第一帧图像。最后，我们可以通过调用 toDataURL 方法将画布上的图像数据转换为 base64 格式。
    handleFileChange(file) {
      this.$refs.upload.clearFiles();
      const reader = new FileReader();
      reader.onload = event => {
        this.captureVideoFrame(event.target.result);
      };
      reader.readAsDataURL(file.raw);
    },
    captureVideoFrame(videoDataUrl) {
      const video = document.createElement("video");
      video.src = videoDataUrl;
      video.onloadedmetadata = () => {
        const canvas = document.createElement("canvas");
        const { videoWidth, videoHeight } = video;
        canvas.width = videoWidth;
        canvas.height = videoHeight;

        // 在视频播放到指定时间后截取画面
        const snapshotTime = 1; // 截取时间点（单位：秒）
        video.currentTime = snapshotTime;

        video.onseeked = () => {
          // 绘制视频当前时间点的画面到画布上
          canvas
            .getContext("2d")
            .drawImage(video, 0, 0, videoWidth, videoHeight);
          const imageDataUrl = canvas.toDataURL("image/jpeg");
          // 将 base64 格式的图像数据用于显示或上传
          const url = this.data64toFile(imageDataUrl);
          this.coverUrl = url;
          this.coverList.push({ url: url, flag: true });
          console.log(this.coverList, "视频截图");
        };
        // 将 base64 格式的图像数据用于显示或上传
      };
    },
//对拿到的base64编码转为blob
    data64toFile(base64URL) {
      const arr = base64URL.split(",");
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      const blob = new Blob([u8arr], { type: mime });
      const url = URL.createObjectURL(blob);
      return url;
    },