Canvas获取视频第一帧缩略图的实现

记录下一个疑问，最近在从头看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=http://www.jb51.net/html5/"../../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视频缩略图内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!