vue videojs使用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

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

javascript 复制代码
/** 初始化视频播放器 */
    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、图例

点击《截图》,直接下载

截取的画面:

相关推荐
A_ugust__23 分钟前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生25 分钟前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
yi碗汤园28 分钟前
【一文了解】C#的StringSplitOptions枚举
开发语言·前端·c#
cxr8282 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
小菜全2 小时前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
emma羊羊2 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
真的想不出名儿5 小时前
vue项目引入字体
前端·javascript·vue.js
红米饭配南瓜汤5 小时前
WebRTC 发送端 SSRC 生成流程总结
网络·网络协议·音视频·webrtc·媒体
胡楚昊5 小时前
Polar WEB(1-20)
前端
笨蛋不要掉眼泪5 小时前
SpringBoot项目Excel成绩录入功能详解:从文件上传到数据入库的全流程解析
java·vue.js·spring boot·后端·spring·excel