canvas截取视频当前播放截图

  function captureVideoFrame() {
    const videoObj = document.getElementById("video_html5_api");// video.js video的id
    const canvas = document.createElement("canvas");

    canvas.width = videoObj.videoWidth;// 获取视频的宽高
    canvas.height = videoObj.videoHeight;
    canvas
      .getContext("2d")
      .drawImage(videoObj, 0, 0, canvas.width, canvas.height);

    const DATAURI = canvas.toDataURL(`image/png`);
    const data = DATAURI.split(",")[1];
    const mimeType = DATAURI.split(";")[0].slice(5);

    const bytes = window.atob(data);
    const buf = new ArrayBuffer(bytes.length);
    const arr = new Uint8Array(buf);

    for (let i = 0; i < bytes.length; i += 1) {
      arr[i] = bytes.charCodeAt(i);
    }

    const BLOB = new Blob([arr], { type: mimeType });
    return { blob: BLOB, dataUri: DATAURI };// 取dataUri就可展示图片<img src={dataUri} />
  }

注：这种方法只能取到当前视频播放点的截图，如需截取其他时间图片请将视频跳转到该时间点，再进行截图