记录canvas获取video第一帧
直接上代码:
/* 获取视频第一帧 */
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格式的图片文件
})
})
}