Vue3实现在视频中截取某一帧

先看下效果

主要技术就是运用了canvas给画出来，canvas画出来之后返回的是base64,我这里要给服务器发送一个file文件，所以又将base64转换成了file,然后发给了服务器。

主要技术就是这点代码

let canvas = document.createElement("canvas");
  const ratios = videos.value.width / videos.value.height;
  canvas.width = 2000;
  canvas.height = canvas.width / ratios;
  //将当前视频帧画到canvas上面
  let ctx = canvas.getContext("2d");
  ctx.drawImage(videos.value, 0, 0, canvas.width, canvas.height);
  // return;
  videoImg.value = canvas.toDataURL("image/png", 1);
  canvas = null;

videos.value.width 和video.value.height就是自己视频的宽高

这个videoImg.value 就是得到的base64了