本篇内容主要讲解“Canvas如何获取视频第一帧缩略图”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“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="../../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如何获取视频第一帧缩略图”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://www.jb51.net/html5/751802.html