前端開發Canvas如何獲取視頻縮略圖

本篇內容主要講解“前端開發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");
  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如何獲取視頻縮略圖”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！