时间:2021-05-08
记录下一个疑问,最近在重新看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="../../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视频缩略图内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了C#获取视频某一帧的缩略图的方法。分享给大家供大家参考。具体实现方法如下:读取方式:使用ffmpeg读取,所以需要先下载ffmpeg。网上资源有很
Androidraw目录下视频的缩略图的获取以下代码用于获取Androidraw目录下视频文件的缩略图:/***获取raw下指定视频文件的缩略图*@parama
一、需求:上传视频,同时截取视频某一帧作为视频的封面。二、实现思路:利用canvas绘制图像的功能,绘制图像某一帧,这里绘制了第一帧,很简单就实现了。三、代码:
第一种复制代码代码如下://////生成缩略图//////源图路径(物理路径)///缩略图路径(物理路径)///缩略图宽度///缩略图高度///生成缩略
复制代码代码如下:///生成缩略图//////源图路径///缩略图路径///缩略图宽度///缩略图高度///生成缩略图的方式:HW指定高宽缩放(可能变形);W指