vue js视频截图

<template>
  <div>
    <div>
      <el-button @click="uploadFile">上传</el-button>
    </div>
    <div>
      <img :src="imgUrl" width="300">
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const imgUrl = ref("")

function uploadFile(e) {
  var el = document.createElement("input")
  el.type = "file"
  el.onchange = function () {
    loadVideo(el.files[0])
  }
  el.click()
}

function loadVideo(file) {
  //加载视频
  const video = document.createElement("video");
  video.src = window.URL.createObjectURL(file)
  video.currentTime = 1
  //视频准备就绪
  video.oncanplay = function () {
    videoScreenshot(video, file)
  }
}

function videoScreenshot(video, file) {
  //创建画布，绘制视频图像
  const canvas = document.createElement("canvas");
  canvas.width = video.videoWidth
  canvas.height = video.videoHeight
  const ctx = canvas.getContext('2d')
  ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)

  //画布图片
  imgUrl.value = canvas.toDataURL();
  console.log('screenshotDataUrl', imgUrl.value);

  //转成文件
  var imageFile = base64toFile(imgUrl.value, file.name);
  console.log('imageFile', imageFile);
}

function base64toFile(base64Str, fileName) {
  let arr = base64Str.split(',');
  console.log(arr[0])
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], fileName, { type: mime })
}
</script>