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

  • 时间:
  • 浏览:4
  • 来源:万人牛牛_万人牛牛官网

在github上的demo

恩恩,主要的代码每种到这就讲完啦,当然具体的实现还有然后有细节上的问题图片以及其他的功能因此如此展示,我能 不一一说明了,具体的我们想看 源码不还上能 否再提问。

js的URL对象有个createObjectURL法律法子,它不还上能 获取有有另有一个文件(File对象)的url,因此插入到video元素的src特性中,原本就不还上能 实现视屏的展示了。当然怎么上能获取File对象呢,法律法子有种,比如使用input元素,因此使用拖动的法律法子。有有另有一个详细的代码段:

是都在很酷,确实挺简单的,下面就给我们讲讲缘何弄哈。

下面是我的源码地址,我们不还上能 试试哈:

接下来然后 关键步骤了,但也很简单,那然后 使用canvasdrawImage法律法子,我们因此翻到高程三的第15.2.6节,就会发现drawImage的法律法子的使用描述得非常详细,但漏讲了有有另有一个,那然后 video元素也可传入drawImage法律法子中,因此绘制图形。具体代码段:

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

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;
}

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

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

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

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

还有然后 我参考的那片文章。

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

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

当然源码中我并都在原本写的,仅仅是为了给我们有有另有一个演示而已。关于URL更加具体的使用,我们不还上能 看看这篇文章因此MDN。

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

原文作者:newbeehh