当前位置：首页 > news >正文

vue videojs使用canvas截取视频画面

news 2025/6/27 10:13:30

前言
刚开始做的时候太多坑，导致一直报错：
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.jsplayer.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;// 创建 Canvasconst 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 // 目标尺寸);// 转换为 DataURLconst 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();};