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

HTML代码片段：

<divclass="canvas-class"><canvasid="canvasImgDemo"></canvas></div><divclass="img-source"><divclass="video-div"><videoid="videoSource"controls="controls"postersrc="../../resources/1.mp4"onloadeddata="videoGetFirstFrame(this)></video></div></div>

Chrome能显示方法

在标签中添加事件处理，这时候可以得到第一帧的图片数据。

varimgs=[];varvideoGetFirstFrame=(elem)=>{varcanvas=document.createElement("canvas"),img=newImage();canvas.getContext("2d").drawImage(elem,0,0);letdataURL=canvas.toDataURL("image/png");img.onload=(e)=>{vartarget=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代码片段

letelem=document.getElementById("canvasImgDemo"),ctx=elem.getContext(module.CONTEXT_TYPE),targetElem=document.getElementById(target),tagName=targetElem.tagName;ctx.drawImage(targetElem,0,0);varimgData=elem.toDataURL("image/png"),img=newImage();img.onload=()=>{ctx.drawImage(img,0,0,elem.width,elem.height);}img.src=imgData;

方法二:

其实跟方法一类似，不过思路是用document创建的HTMLVideoElement作一次中转之后来触发这个loadeddata事件的发生，算是上面方法在video的应用。

letvideo=document.createElement("video");video.addEventListener("loadeddata",(evt)=>{ctx.drawImage(evt.target,0,0);letdataURL=elem.toDataURL("image/png");letimg=newImage();img.onload=()=>{ctx.drawImage(img,0,0,300,150);};img.src=dataURL;});video.src=targetImg.src;ctx.drawImage(targetImg,0,0);

到此，相信大家对“前端开发Canvas如何获取视频缩略图”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！