前端开发Canvas如何获取视频缩略图

本篇内容主要讲解"前端开发Canvas如何获取视频缩略图"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"前端开发Canvas如何获取视频缩略图"吧!

HTML代码片段：

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如何获取视频缩略图"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！