記錄下一個疑問，最近在重新看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視頻縮略圖內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
