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

2024-11-2 22:16| 发布者: ae2942d9| 查看: 73| 评论: 0

摘要: 记录下一个疑问，最近在重新看canvas做点Demo这样，时间是写在2019年11月5日，以后要是没有这个问题了，以W3C更新的为标准，这个只是参考实行着在canvas中显示视频第一帧的时候碰上的问题：在Chrome中，用 video.ad

记录下一个疑问，最近在重新看canvas做点Demo这样，时间是写在2019年11月5日，以后要是没有这个问题了，以W3C更新的为标准，这个只是参考实行着在canvas中显示视频第一帧的时候碰上的问题：在Chrome中，用 video.addEventLisener("loadeddata",func)、 video.onloadeddata = func无法在函数中获取到未预加载的视频的第一帧的图片。同样的代码在Firefox中未预加载的视频可以获取到第一帧，而且可以大概渲染到canvas中。以下都是不进行预加载的环境下运行的。

要是不能运行了就在批评里说下，我是从写的一个Demo里截下来一部分的=。=

HTML代码片断

[code] <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> [/code]

Chrome能显示方法

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

[code] 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); }; [/code]

Firefox下可以运行的

以下两种方法在Chrome下没法显示图片，但是在Firefox下也可以显示。在Chrome控制台你可以瞥见拿到的dataURL其实是一个全透明的矩形。不外在预加载、加载过大概缓存过一次视频后，canvas就有了。

方法一

JS代码片断

[code] 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; [/code]

方法二

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

[code] 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); [/code]

到此这篇关于Canvas获取视频第一帧缩略图的实现的文章就先容到这了,更多干系Canvas视频缩略图内容请搜索脚本之家以前的文章或继续欣赏下面的干系文章，希望各人以后多多支持脚本之家！

来源：https://www.jb51.net/html5/751802.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：利用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的结果下一篇：Html5原生拖拽相关事件简介以及基础实现

账号		自动登录	找回密码
密码			立即注册

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

相关分类

站长推荐 /6