canvas获取视频第一帧生成图片

/* 获取视频第一帧 */
export const getFirstFrame = (url): Promise<Blob> => {
  return new Promise<Blob>((resolve) => {
    const video = document.createElement("video")
    video.setAttribute("crossOrigin", "anonymous") //处理跨域
    video.setAttribute("src", url)
    video.setAttribute("preload", "auto")
    // 必须设定宽高才能生成图片
    video.setAttribute("width", "300px")
    video.setAttribute("height", "180px")
    video.addEventListener("loadeddata", function () {
      const canvas: HTMLCanvasElement = document.createElement("canvas"),
        width = video.width, //canvas的尺寸和图片一样
        height = video.height
      canvas.width = width
      canvas.height = height
      canvas.getContext("2d")!.drawImage(video, 0, 0, width, height) //绘制canvas
      canvas.toBlob((blob) => resolve(blob as Blob), "image/jpeg")//获取blob格式的图片文件
      canvas.toDataURL("image/jpeg")//获取base46格式的图片文件
    })
  })
}