一个写好的html页面要打印pdf,其中有视频也有图片。参考了网上的一些方法,最终是在获取数据的时候,对视频进行了截取第一帧处理。
getFirstImgBase64(){
this.piclist.forEach(item => {
if(item.url.endsWith('.mp4')) {
let dataURL = ""
let video = document.createElement("video")
video.setAttribute("crossOrigin", "anonymous") //处理跨域,保证可以读取到视频
video.setAttribute("src", item.url)
video.setAttribute("preload", "auto") // 不设置该项就不会开启预先加载视频,那么拿到的会是黑屏
// 第一帧加载完毕时调用
video.addEventListener("loadeddata", function () {
let canvas = document.createElement("canvas")
anvas.width = 100 //canvas的尺寸————可以理解为画板的尺寸————最终img占据的大小
canvas.height = 100//绘制canvas,[资源地址,绘制起始横坐标,绘制起始纵坐标,绘制宽度,绘制高度]
//————宽度高度可以理解为绘制的图像的尺寸,和上面的画板canvas的尺寸做好区分
canvas.getContext("2d").drawImage(video, 0, 0, 100, 100)
dataURL = canvas.toDataURL("image/jpeg") //转换为base64
item.thumbnailUrl = dataURL
})
}
})
}
同时定义了一个属性,在点击下载的时候将视频切换为图片,保证下载,下载完成后再切回视频
<div v-for="(item, index) in piclist" id="content" class="flex">
<video v-if="item.url.endsWith('.mp4') && !isDownload" :src="item.url" :ref="'videoElement' + index" width="100px" height="100px" controls style="margin-right: 20px"></video>
<img v-if="item.url.endsWith('.mp4') && isDownload" :src="item.thumbnailUrl" alt="Video Thumbnail" style="margin-right: 20px">
<el-image v-if="!item.url.endsWith('.mp4')"
:src="item.url"
style="width: 100px;height: 100px;margin-right: 20px" :preview-src-list="[item.url]"></el-image>
</div>
// 点击下载按钮,在getpdf中使用new Promise定义了一个结束返回
onClickDownLoad(name) {
this.isDownload = true
this.$nextTick(() => {
this.getPdf('pdfDomRecord', name).then(res => {
this.isDownload = false
});
})
}
标签:视频,canvas,处理,item,video,htmlToPdf,100,绘制
From: https://www.cnblogs.com/mulu777/p/18302977