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获取视频第一帧缩略图的实现的文章就介绍到这了,更多相关canvas视频缩略图内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！