<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
})
})
});
},