掌财社:前端开发Canvas怎么获取视频缩略图？获取视频缩略图案例！

在网络中我们会看懂很多的缩略图，那么大家知道关于视频中的缩略图怎么实现吗？那么今天我们就来讲讲有关于：“前端开发Canvas怎么获取视频缩略图？”这个问题，下面是有关于这个问题的内容分享！

HTML代码片段：

<div class="canvas-class">
 <canvas id="canvasImgDemo"></canvas>
</div>
<div class="img-source">
 <div class="video-div">
  <video id="videoSource" 
   controls="controls" 
   poster 
   src="../../resources/1.mp4" 
   onloadeddata="videoGetFirstFrame(this)
  ></video>
 </div>
</div>

Chrome能显示方法

在标签中添加事件处理，这时候可以得到第一帧的图片数据。

 var imgs = [];
 var videoGetFirstFrame = (elem) => {
  var canvas = document.createElement("canvas"),
   img = new Image();
  canvas.getContext("2d").drawImage(elem, 0, 0);

  let dataURL = canvas.toDataURL("image/png");
  im