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

  • 时间:
  • 浏览:0
  • 来源:uu直播快3平台_UU快3直播官方

接下来统统 关键步骤了,但也很简单,那统统 使用canvasdrawImage土法律法律依据 ,有些人过后翻到高程三的第15.2.6节,就会发现drawImage的土法律法律依据 的使用描述得非常完全,但漏讲了一一两个多 ,那统统 video元素也可传入drawImage土法律法律依据 中,若果绘制图形。具体代码段:

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

给有些人讲解下我前几天都看的一一两个多 有趣小demo:视频在线截图。以下是我修改和加进去去了新功能后的效果图:

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

js的URL对象有个createObjectURL土法律法律依据 ,它都要获取一一两个多 文件(File对象)的url,若果插入到video元素的src结构中,从前就都要实现视屏的展示了。当然如何获取File对象呢,土法律法律依据 有种,比如使用input元素,过后使用拖动的土法律法律依据 。一一两个多 完全的代码段:

下面是我的源码地址,有些人都要试试哈:

在github上的demo

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

原文作者:newbeehh

还有统统 我参考的那片文章。

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

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

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

当然源码中我并完全都是从前写的,仅仅是为了给有些人一一两个多 演示而已。关于URL更加具体的使用,有些人都要看看这篇文章过后MDN。

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

恩恩,主要的代码每种到这就讲完啦,当然具体的实现还有统统细节上的问题报告 报告 以及有些的功能过后找不到展示,我就不一一说明了,具体的有些人都看源码后都要再提问。

是完全都是很酷,实在挺简单的,下面就给有些人讲讲为什么我么我弄哈。

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