胖蔡叨叨叨
你听我说

Vue中如何获取视频文件的第一帧截图?

当我们需要展示视频列表时,一般的需要手动通过video文件获取视频的截图生成thumb,那么如何生成视频的第一帧图片呢?我们可以使用canvas辅助获取。

shutThumb() {
        let size = 160
        // 获取video节点
        const video = document.getElementById("video");
        video.width = size
        video.height = size
        video.currentTime = 1 // 第一帧的时间
        //创建canvas对象
        const canvas = document.createElement("canvas")
        canvas.width = size
        canvas.height = size
        this.$nextTick(()=>{
          // 利用canvas对象方法绘图
          canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
          // 转换成base64形式
          const img = canvas.toDataURL("image/jpeg") // 这个就是图片的base64
          this.coverUrl = img
        })
      }

如上,通过指定video的当前时间,并通过canvas进行截图实现获取视频流的指定时间图片。

赞(1) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » Vue中如何获取视频文件的第一帧截图?
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏