在網(wǎng)絡(luò)中我們會(huì)看懂很多的縮略圖,那么大家知道關(guān)于視頻中的縮略圖怎么實(shí)現(xiàn)嗎?那么今天我們就來講講有關(guān)于:“前端開發(fā)Canvas怎么獲取視頻縮略圖?”這個(gè)問題,下面是有關(guān)于這個(gè)問題的內(nè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è)全透明的矩形。不過在預(yù)加載、加載過或者緩存過一次視頻后,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í)跟方法一類似,不過思路是用document創(chuàng)建的HTMLVideoElement作一次中轉(zhuǎn)之后來觸發(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)于:“前端開發(fā)Canvas怎么獲取視頻縮略圖?”這個(gè)問題的全部內(nèi)容分享了,那么今天我們文章內(nèi)容的介紹就到這這了,更多相關(guān)Canvas這方面的內(nèi)容大家請(qǐng)搜索W3Cschool進(jìn)行學(xué)習(xí)!