当前位置: 首页 > Web前端 > JavaScript

js截取视频帧

时间:2023-03-27 15:43:56 JavaScript

注意,播放视频一定要截取视频帧作为封面,可以监听播放进度截取封面。如果屏幕截图没有播放,它将是黑屏。事件处理过程中可以监听vedio的timeupdate事件完成截图。另外注意vedio标签的crossOrigin属性设置为“anonymous”,防止跨域拦截/***@desc:base64toblob*@param{WindowBase64}dataURIbase64*@return{Blob}*/exportconstdataURItoBlob=(dataURI:string)=>{constbyteString=atob(dataURI.split(',')[1]);constab=newArrayBuffer(byteString.length);constia=newUint8Array(ab);for(vari=0;i{returnnewFile([newBlob],fileName,{type:fileType,lastModified:Date.now(),});};/***@desc:base64tofile*@param{String}srcimagebase64*@param{String}文件名filename*@return{void}*/exportconstdataURIToFile=(src:string,fileName:string)=>{constblob=dataURItoBlob(src);constfile=blobToFile(blob,文件名);returnfile;};/***@desc:截取视频帧并返回截取的图片(File文件对象格式和base64格式)(实验结果视频播放后必须拦截成功)*@param{HTMLVideoElement}video视频标签节点*@param{String}fileName文件名*@param{string}imageType图片格式*@return{Object<{file:File,src:WindowBase64}>}res={file,src}结果对象文件是一个图片文件对象格式srcbase64imageformat*/exportconstcaptureVideoPoster=(video:HTMLVideoElement,fileName:string,imageType='image/png',)=>{if(!video)return;constwidth=video.videoWidth;constheight=video.videoHeight;constcanvas=document.createElement('canvas');constctx=canvas.getContext('2d')asCanvasRenderingContext2D;画布.width=宽度;canvas.height=高度;ctx.drawImage(视频,0,0,宽度,高度);constsrc=canvas.toDataURL(imageType);constfile=dataURIToFile(src,fileName);返回{源文件,};};