vuevideojs使用canvas截取视频画面

前言 刚开始做的时候太多坑，导致一直报错： Uncaught (in promise) TypeError: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type ‘(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)’.

直接上代码！！！

1、html <el-button class="capture-item" type="primary" @click="captureScreenshot">截图</el-button> <video id="viewer" class="video-js vjs-default-skin" crossorigin="anonymous" controls> <source :src="playVideo.url" type='video/mp4'> </video> 2、js /** 初始化视频播放器 */ const initViewer = async () => { await nextTick() // 等待 DOM 更新 // 初始化 video.js player.value = videojs('viewer', { controls: true, autoplay: true, fluid: true, }); } // 截图功能 const captureScreenshot = () => { if (!player.value) return; const videoElement = player.value.el().querySelector('video'); if (!videoElement) return; // 创建 Canvas const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); if (!ctx) return; // 设置 Canvas 尺寸（可排除控制条） const controlHeight = 30; // 控制条高度 canvas.width = videoElement.videoWidth; canvas.height = videoElement.videoHeight - controlHeight; // 绘制当前帧 ctx.drawImage( videoElement, 0, 0, videoElement.videoWidth, videoElement.videoHeight - controlHeight, // 源尺寸 0, 0, canvas.width, canvas.height // 目标尺寸 ); // 转换为 DataURL const dataUrl = canvas.toDataURL('image/png'); downloadImage(dataUrl); }; // 下载图片 const downloadImage = (dataUrl: string) => { const link = document.createElement('a'); link.download = `视频截图_${new Date()}.png`; link.href = dataUrl; link.click(); };

我这里是截取完画面下载到浏览器！

3、图例

点击《截图》，直接下载 截取的画面：