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

到此，相信大家對(duì)“Canvas如何獲取視頻第一幀縮略圖”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！