Canvas獲取視頻第一幀縮略圖的實(shí)現(xiàn)

發(fā)布時(shí)間：2020-11-11 16:51:23 作者：卡莉婭

這篇文章主要介紹了Canvas獲取視頻第一幀縮略圖的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

記錄下一個(gè)疑問(wèn)，最近在重新看canvas做點(diǎn)Demo這樣，時(shí)間是寫在2019年11月5日，以后要是沒有這個(gè)問(wèn)題了，以W3C更新的為標(biāo)準(zhǔn)，這個(gè)只是參考嘗試著在canvas中顯示視頻第一幀的時(shí)候碰上的問(wèn)題：在Chrome中，用 video.addEventLisener("loadeddata",func)、 video.onloadeddata = func無(wú)法在函數(shù)中獲取到未預(yù)加載的視頻的第一幀的圖片。同樣的代碼在Firefox中未預(yù)加載的視頻可以獲取到第一幀，并且能夠渲染到canvas中。以下都是不進(jìn)行預(yù)加載的情況下運(yùn)行的。

要是不能運(yùn)行了就在評(píng)論里說(shuō)下，我是從寫的一個(gè)Demo里截下來(lái)一部分的=。=

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能顯示方法

在標(biāo)簽中添加事件處理，這時(shí)候可以得到第一幀的圖片數(shù)據(jù)。

 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下可以運(yùn)行的

以下兩種方法在Chrome下沒法顯示圖片，但是在Firefox下也可以顯示。在Chrome控制臺(tái)你可以看見拿到的dataURL其實(shí)是一個(gè)全透明的矩形。不過(guò)在預(yù)加載、加載過(guò)或者緩存過(guò)一次視頻后，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;

方法二

其實(shí)跟方法一類似，不過(guò)思路是用document創(chuàng)建的HTMLVideoElement作一次中轉(zhuǎn)之后來(lái)觸發(fā)這個(gè)loadeddata事件的發(fā)生，算是上面方法在video的應(yīng)用。

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

到此這篇關(guān)于Canvas獲取視頻第一幀縮略圖的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Canvas視頻縮略圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！