video视频导出pdf截图

FormerWhite 2021-12-14 原文

<div class="imgShow">
   <img style="border:none" :src="newImage" alt="">
</div>
<video v-show="imgVideoTab" muted class="video-class" id="video_id" autoplay webkit-playsinline playsinline></video>
<canvas class="video-class" id="canvasImg" style="display:none"></canvas>

<el-button size="small" type="primary" @click="exportHand">导出</el-button>

   getCurPic() {
      //因需截图部分为弹框中部分内容，为保证页面正常渲染，点击导出后，为确保图片正常显示，图片不出现黑屏，必须按顺序延迟操作。
      this.$nextTick(() => {
        setTimeout(()=>{
            var video = document.getElementById("video_id");
            var canvas = document.getElementById(\'canvasImg\');
            // 因视频两侧有黑边并且黑边宽度不固定，所以自适应宽度，保证视频截图不变形
            let width = 550/video.videoHeight*video.videoWidth
            canvas.setAttribute("width",width+"px")
            canvas.setAttribute("height","550px")
            var ctx = canvas.getContext(\'2d\'); 
            ctx.drawImage(video, 0, 0, width, 550);
            var images = canvas.toDataURL(\'image/png\'); 
            this.newImage = images
            this.imgVideoTab = false
            setTimeout(()=>{
              this.exportPdfHandler(\'ExportBody\',\'某某报告\')  //此函数参考 “vue页面导出pdf” 笔记
              // this.ExportHealthDialog = false
            })
        })
      });
    },