Vue实现播放视频点击截图并上传

最新推荐文章于 2024-09-25 10:31:53 发布

535366

最新推荐文章于 2024-09-25 10:31:53 发布

阅读量611

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/a535366/article/details/124468756

版权

本文介绍了如何使用Vue.js框架在视频播放过程中实现点击截图，并将截图图片上传到服务器的方法。通过结合JavaScript的canvas API，实现动态捕获视频帧为图像，再进行上传操作。

摘要由CSDN通过智能技术生成

    <canvas id="myCanvas" width="400" height="200" v-show="condition"></canvas>

 data() {
      return {
        imgSrc: '', //图片
      };
    },

    // 截图
      async cutPicture() {
        // 获取播放视频的容器
        var v = document.querySelector("video");
        // 获取canvas容器
        let canvas = document.getElementById('myCanvas')
        var ctx = canvas.getContext('2d');
        ctx.drawImage(v, 0, 0, 343, 200);
        // 定义图片格式
        var oGrayImg = canvas.toDataURL('jpg');
        this.imgSrc = canvas
        // 刚截下来的图片是base64格式不能直接上传服务器，需要转换
        let str = this.base64toFile(oGrayImg, 'files') //base64图片格式转文件流
        //发送给后端
        let formData = new FormData();
        // 发送请求
        for