JS实现视频截图

截图原理：#

文件上传，将视频绘制到canvas中进行截图

贴代码

base64 转成文件#

下面需要用到

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

export const dataURLtoFile = ({   dataURL = "",   filename = "" }: {   dataURL: string   filename: string }) => {   const arr = dataURL.split(",")   const mime = arr[0].match(/:(.*?);/)[1]   const bstr = atob(arr[1])   let n = bstr.length   const u8arr = new Uint8Array(n)   while (n--) {     u8arr[n] = bstr.charCodeAt(n)   }   return new File([u8arr], filename, { type: mime }) }

 

将视频绘制到canvas上#

后面会用到

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

function drawVideoToCanvas({   videoElement,   filename }: {   filename: string   videoElement: HTMLVideoElement }): Promise<{ file: Blob; url: string }> {   return new Promise(resolve => {     const canvas = document.createElement("canvas")     const ctx = canvas.getContext("2d")     canvas.width = videoElement.videoWidth     canvas.height = videoElement.videoHeight     if (!ctx) {       return new Error("ctx is not defined!")     }     ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height)     const dataURL = canvas.toDataURL("image/png")     const file = dataURLtoFile({       dataURL,       filename     })     const url = URL.createObjectURL(file) // 实现本地预览     resolve({       file,       url     })   }) }

 

播放视频，图片截取#

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

export function captureFrame({   file,   time = 0,   filename = "screenshot.png" }: {   file: Blob   time?: number   filename?: string }): Promise<{ file: Blob; url: string }> {   return new Promise(resolve => {     // 因为dom节点没有渲染到浏览器，视频播放到指定的时间就会停止播放     const videoElement = document.createElement("video")     videoElement.currentTime = time // 设置截取的帧时间     // 自动播放存在兼容性问题，设置静音解决自动播放在不同浏览器的兼容性问题     videoElement.muted = true     videoElement.autoplay = true     videoElement.src = URL.createObjectURL(file)     videoElement.oncanplay = async function () {       const flame = await drawVideoToCanvas({ filename, videoElement })       resolve(flame)     }   }) }

 

下面是react代码示例#

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

const Example28 = () => {   return (     <div>       <input         type="file"         onChange={event => {           const [file] = event.target.files || []           captureFrame({ file, time: 1 }).then(data => {             console.log(data)             const IMG = new Image()             IMG.src = data.url             IMG.width = 200             document.body.append(IMG)           })         }}       />     </div>   ) }   export default Example28

 

示例截图#