首页 > 其他分享 >htmlToPdf处理视频

htmlToPdf处理视频

时间:2024-07-15 13:41:18浏览次数:17  
标签:视频 canvas 处理 item video htmlToPdf 100 绘制

一个写好的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

相关文章

  • Panda数据处理
    一、Pandas简介Pandas,python+data+analysis的组合缩写,是python中基于numpy和matplotlib第三方数据分析库,与后者共同构成python数据分析基础工具包,享有数据三剑客之名。正因为pandas是在numpy基础上实现的,其核心数据结构与numpy的ndarray十分相似,但pandas与numpy的关系不是替代,而......
  • 关于 Scanner 类读取输入时换行符处理及不同方法的差异总结
    Scannerscanner=newScanner(System.in);System.out.print("请输入一个整数:");intnum=scanner.nextInt();System.out.print("请输入一个字符串:");Stringstr=scanner.nextLine();请输入一个整数:5......
  • OpenCV——实现视频图像抖动的效果
    #Jitterimportcv2importnumpyasnp#视频路径和输出路径input_video_path=r'D:\desk\20240713_test\Ori_Videos\ori_videos\IR\ir_shake_20240713.mp4'output_video_path=r'D:\desk\20240713_test\Ori_Videos\enhance\IR\jitter\jitter_20.......
  • OpenCV——实现视频图像的来回摆动的效果
    #Swingimportcv2defrotate_img(image,angle):#Readingtheimage#dividingheightandwidthby2togetthecenteroftheimageheight,width=image.shape[:2]#getthecentercoordinatesoftheimagetocreatethe2Drotationmatr......
  • python库(13):Tablib库简化数据处理
    1 Tablib简介数据处理是一个常见且重要的任务。无论是数据科学、机器学习,还是日常数据分析,都需要处理和管理大量的数据。然而,标准库中的工具有时显得不够直观和简便。这时,我们可以借助第三方库来简化数据处理流程。Tablib就是这样一个强大的数据处理库,它提供了一套简单易用......
  • 写真图片视频打赏系统源码全开源无加密
    这是一款开源的写真图片及视频打赏系统源码,顾名思义他可以做写真图片打赏站也可以做视频打赏站,支付对接了易支付,拥有独立代理后台,全部源码无加密,另外也可以配合付费进群使用。支付扣量、域名防洪这些基本的就不介绍了,看图吧!留给有需要的人!源码下载:图片视频打赏系统源码.zip可......
  • 【c语言】你绝对没见过的预处理技巧
    ......
  • OpenCV图像处理——霍夫圆检测与最小二乘法拟合圆
    HoughCircles:霍夫圆检测voidHoughCircles(InputArrayimage,OutputArraycircles,intmethod,doubledp,doubleminDist,doubleparam1=100,doubleparam2=100,intminRadius=0,intmaxRadius=0);image:输入,8-bit单通道灰度图circles:输出,vector,含有3或......
  • OpenCV图像处理——判断轮廓是否在圆环内
    要判断一个轮廓是否在圆环内,可以将问题分解为两个步骤:确保轮廓的所有点都在外圆内。确保轮廓的所有点都在内圆外。下面是一个完整的示例代码,展示如何实现这一点:#include<opencv2/opencv.hpp>#include<iostream>#include<vector>#include<cmath>usingnamespace......
  • 推荐2个在线PDF文件处理网站,功能很赞,值得关注
    飞扬PDF飞扬PDF是一款功能强大且免费的PDF转换和编辑工具。该软件能够实现多种格式之间的互转,包括但不限于PDF与PPT、Excel、TXT等格式。此外,它还支持高效拆分、合并PDF文件,并具备智能OCR识别及语音转文字的功能。飞扬PDF转换器不仅操作简便,而且界面清爽直观,用户可以轻松上......