vue 获取上传视频的第一帧做为视频封面-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 获取上传视频的第一帧做为视频封面。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

上一篇文章记录了vue上传视频，接下来，需要在上传成功后截取视频第一帧做为视频封面。

截取视频第一帧

具体实现如下：

<template>
  <div>
    <div v-if="mediaList&&mediaList[0]&&mediaList[0].url">
      <video :src="mediaList[0].url" style="width:320px;height:200px;" controls="controls" id="upvideo">您的浏览器不支持视频播放</video>
    </div>
    <canvas id="mycanvas" style="display: none"></canvas>
  </div>
</template>

上传视频之后，在成功回调函数中拿到视频地址，video.src=url，然后，使用canvas截取图片。

//截取视频第一帧作为播放前默认图片
findvideocover(url,file) {
        const  video = document.getElementById("upvideo"); // 获取视频对象
        // const video = document.createElement("video") // 也可以自己创建video
         video.src=url // url地址 url跟 视频流是一样的
        var canvas = document.getElementById('mycanvas') // 获取 canvas 对象
        const ctx = canvas.getContext('2d'); // 绘制2d
        video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
        video.currentTime = 1 // 第一帧
        video.oncanplay = () => {
          canvas.width = video.clientWidth; // 获取视频宽度
          canvas.height = video.clientHeight; //获取视频高度
          // 利用canvas对象方法绘图
          ctx.drawImage(video, 0, 0, video.clientWidth,video.clientHeight)
          // 转换成base64形式
         this.imgsrc = canvas.toDataURL ("image/png") // 截取后的视频封面
         file.url=this.imgsrc;
      }
}

canvas

截取视频第一帧使用的是canvas，相关步骤如下：

canvas可以用来截取图片。

适用场景：截取或者处理图片/视频/富文本编辑器。

（1）创建画布canvas或在html中直接写入：

var canvas = document.createElement('canvas');

（2）创建基于canvas的绘图环境：

var ctx = canvas.getContext('2d')

相关概念

绘图环境

在准备画布后，需要一些‘染料、画笔、绘图工具’的准备工作。也就是 canvas的上下文环境。

canvas.getContext(‘2d’)

2d目前可以理解为是固定参数，表示一个二维绘制环境。

canvas.getContext(‘2d’)的返回值

返回一个CanvasRenderingContext2D对象，也就是上文的能够支持绝大多数对画布的操作。

（3）在canvas上绘制图片

 // ctx.drawImage(file,sx,sy,swidth,sheight,x,y,width,height);
ctx.drawImage(this, 0, 0, swidth, sheight);

在不需要剪裁的情况下，使用上述参数即截取操作file的全部，绘制到canvas上

参数	描述
file	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）。
height	可选。要使用的图像的高度。（伸展或缩小图像）。

（4）将canvas导出成图片放入src

var src = canvas.toDataURL('image/jpeg');

toDataURL()方法

toDataURL()方法是将canvas的内容导出。

canvas.toDataURL(type, encoderOptions);

type: 图片格式，默认image/jpeg，
encoderOptions：图片质量，取值范围为0到1，默认0.92。
返回值：包含 data URI 的DOMString，也就是base64格式。文章来源地址https://www.toymoban.com/news/detail-436555.html

到了这里，关于vue 获取上传视频的第一帧做为视频封面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！