03-25 07:05 阅读 227

Canvas获取视频第一帧缩略图的实现

这篇文章主要介绍了Canvas获取视频第一帧缩略图的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

记录下一个疑问，最近在重新看canvas做点Demo这样，时间是写在2019年11月5日，以后要是没有这个问题了，以W3C更新的为标准，这个只是参考尝试着在canvas中显示视频第一帧的时候碰上的问题：在Chrome中，用 video.addEventLisener("loadeddata",func)、 video.onloadeddata = func无法在函数中获取到未预加载的视频的第一帧的图片。同样的代码在Firefox中未预加载的视频可以获取到第一帧，并且能够渲染到canvas中。以下都是不进行预加载的情况下运行的。

要是不能运行了就在评论里说下，我是从写的一个Demo里截下来一部分的=。=

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");

 img.onload = (e) => {

  var target = document.getElementById("canvasImgDemo"),

   ctx = target.getContext("2d");

  ctx.drawImage(img, 0, 0, target.width, target.height);

};

 imgs.push(dataURL);

};

Firefox下可以运行的

以下两种方法在Chrome下没法显示图片，但是在Firefox下也可以显示。在Chrome控制台你可以看见拿到的dataURL其实是一个全透明的矩形。不过在预加载、加载过或者缓存过一次视频后，canvas就有了。

方法一

JS代码片段

let elem = document.getElementById("canvasImgDemo"),

 ctx = elem.getContext(module.CONTEXT_TYPE),

 targetElem = document.getElementById(target),

 tagName = targetElem.tagName;

ctx.drawImage(targetElem, 0, 0);

var imgData = elem.toDataURL("image/png"),

img = new Image();

img.onload = () => {

 ctx.drawImage(img, 0, 0, elem.width, elem.height);

}

img.src = imgData;

方法二

其实跟方法一类似，不过思路是用document创建的HTMLVideoElement作一次中转之后来触发这个loadeddata事件的发生，算是上面方法在video的应用。

let video = document.createElement("video");

video.addEventListener("loadeddata", (evt) => {

 ctx.drawImage(evt.target, 0, 0);

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

 let img = new Image();

 img.onload = () => {

  ctx.drawImage(img, 0, 0, 300, 150);

};

 img.src = dataURL;

});

video.src = targetImg.src;

ctx.drawImage(targetImg, 0, 0);

到此这篇关于Canvas获取视频第一帧缩略图的实现的文章就介绍到这了