Canvas获得视頻第一帧◎缩列图的完成

日期:2021-03-24 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

纪录下一个疑惑,近期在再次看canvas做些Demo那样,時间是写在今年十一月五日,之后如果沒有这一难题了,以W3C升级的为规范,这一仅仅参照 试着着在canvas中显示信息视頻第一帧的情况下碰上的难题:在Chrome中,用 video.addEventLisener("loadeddata",func)、 video.onloadeddata = func没法在涵数中获得到 未预载入的视頻的第一帧的照片。一样的编码在Firefox中 未预载入的视頻能够获得到第一帧,而且可以3D渲染到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视頻缩列图內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!