web实战:video结合canvas实现视频在线截图

  • 时间:
  • 浏览:16

<input type="file"/>
克隆代码document.querySelector('input[type="file"]').addEventListener('change',function () {
    document.querySelector('video').src = window.URL.createObjectURL(this.files[0])
})

当然源码中我并全是原本写的,仅仅是为了给大伙儿儿有有另另另一个 演示而已。关于URL更加具体的使用,大伙儿儿都并能看看这篇文章可能性MDN。

给大伙儿儿讲解下我前几天看后的有有另另另一个 有趣小demo:视频在线截图。以下是我修改和添加了新功能后的效果图:

原文发布时间为:2018年06月22日

原文作者:newbeehh

js的URL对象有个createObjectURL土土办法,它都并能获取有有另另另一个 文件(File对象)的url,有时候插入到video元素的src行态中,原本就都并能实现视屏的展示了。当然如何获取File对象呢,土土办法有种,比如使用input元素,可能性使用拖动的土土办法。有有另另另一个 详细的代码段:

下面的代码便是创建大图片和小图片并实现动画效果了。为了方便易懂,我这儿使用了JQuery

function getOffset(elem) {
    var pos = {x: elem.offsetLeft, y: elem.offsetTop};
    var offsetParent = elem.offsetParent;
    while (offsetParent) {
        pos.x += offsetParent.offsetLeft;
        pos.y += offsetParent.offsetTop;
        offsetParent = offsetParent.offsetParent;
    }
    return pos;
}

这里主要分为三大块功能,首先是第有有另另另一个 :

接下来太少关键步骤了,但也很简单,那太少使用canvasdrawImage土土办法,大伙儿儿可能性翻到高程三的第15.2.6节,就会发现drawImage的土土办法的使用描述得非常详细,但漏讲了有有另另另一个 ,那太少video元素也可传入drawImage土土办法中,有时候绘制图形。具体代码段:

还有太少参考的那片文章。

该函数是获取小图片距viewport(视口)的距离,并提供给大图片作为位移参数的,高程三的12.2.3节有段几乎一模一样的代码,并附有详细说明,以及替代方案getBoundingClientRect函数全是提到,具体的大伙儿儿翻书看看哈。

恩恩,主要的代码累积到这就讲完啦,当然具体的实现还有太少有细节上的问题图片图片以及太少的功能可能性没办法 展示,想要不一一说明了,具体的大伙儿儿看后源码都并并能再提问。

绘制完成图像后,再调用canvastoDataURl土土办法把图像变成base64编码的url,就可插入到img元素中展示,有有另另另一个 缩略的图的制作便完成了。关于图片和base64的关系,具体的同学们都并能看下这篇文章。

是全是很酷,其实 挺简单的,下面就给大伙儿儿讲讲为社 弄哈。

下面是我的源码地址,大伙儿儿都并能试试哈:

在github上的demo

该动画实现的主要原理是:先在视频原处创建一张大小和视频一致的大图片,设置为绝对布局(position:absolut),在实际放置缩略图处创建一张小图片,设置为不可见(visibility:hidden),有时候大图片通过lefttop实现位移,widthheight实现缩小,至实际放置缩略图处,并形成动画效果。最后大图片删除,小图片显示即可。具体代码段: