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

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

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

b644c352002377414755a821050475a3c001bd26

是不是很酷,其实挺简单的,下面就给大家讲讲怎么弄哈。

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

利用URL对象获取视频链接并展示:

js的URL对象有个createObjectURL方法,它可以获取一个文件(File对象)的url,然后插入到video元素的src特性中,这样就可以实现视屏的展示了。当然如何获取File对象呢,方法有种,比如使用input元素,或者使用拖动的方式。一个完整的代码段:



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


当然源码中我并不是这样写的,仅仅是为了给大家一个演示而已。关于URL更加具体的使用,大家可以看看这篇文章或者MDN。

利用canvas实现视频截图:

接下来就是关键步骤了,但也很简单,那就是使用canvasdrawImage方法,大家如果翻到高程三的第15.2.6节,就会发现drawImage的方法的使用描述得非常详细,但漏讲了一个,那就是video元素也可传入drawImage方法中,并且绘制图形。具体代码段:


var canvas = document.createElement("canvas");
var canvasCtx = canvas.getContext("2d");
var video=document.querySelector('video');复制代码//坐原图像的x,y轴坐标,大小,目标图像的x,y轴标,大小。
canvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);
//把图标base64编码后变成一段url字符串
var dataUrl = canvas.toDataURL("image/png");
//插入图片得src特性中
document.createElement('img').src=dataUrl;
AI 代码解读

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

实现动画效果:

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



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;
}
AI 代码解读

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

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


var $imgBig = $("<img/>");
//设置大图片的初始位置,就是原视频处。
$imgBig.css({
    position: "absolute",
    left: video.offsetLeft,
    top: video.offsetTop,
    width: video.offsetWidth+ "px",
    height: video.offsetHeight+ "px"
}).attr("src", dataUrl);复制代码var $img = $("<img/>");
$img.hide();
//获取小图片的距离参数,实现大图片的动画效果。
var offset = getOffset($img[0]);
//添加动画效果
$imgBig.animate({
    left: offset.x + "px",
    top: offset.y + "px",
    width: $img.width() + "px",
    height: $img.height() + "px"
}, 500, function () {
    $img.show();
    $imgBig.remove();
});
AI 代码解读

恩恩,主要的代码部分到这就讲完啦,当然具体的实现还有很多细节上的问题以及其他的功能可能没有展示,我就不一一说明了,具体的大家看完源码后可以再提问。

下面是我的源码地址,大家可以试试哈:

在github上的demo

还有就是我参考的那片文章


原文发布时间为:2018年06月22日
原文作者: newbeehh
本文来源: 掘金  如需转载请联系原作者


目录
打赏
0
0
0
0
5422
分享
相关文章
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
73 3
Python Web应用中的WebSocket实战:前后端分离时代的实时数据交换
在前后端分离的Web应用开发模式中,如何实现前后端之间的实时数据交换成为了一个重要议题。传统的轮询或长轮询方式在实时性、资源消耗和服务器压力方面存在明显不足,而WebSocket技术的出现则为这一问题提供了优雅的解决方案。本文将通过实战案例,详细介绍如何在Python Web应用中运用WebSocket技术,实现前后端之间的实时数据交换。
151 0
Web应用上云经典架构实战
本课程详细介绍了Web应用上云的经典架构实战,涵盖前期准备、配置ALB、创建服务器组和监听、验证ECS公网能力、环境配置(JDK、Maven、Node、Git)、下载并运行若依框架、操作第二台ECS以及验证高可用性。通过具体步骤和命令,帮助学员快速掌握云上部署的全流程。
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
299 45
实战经验分享:利用免费SSL证书构建安全可靠的Web应用
本文分享了利用免费SSL证书构建安全Web应用的实战经验,涵盖选择合适的证书颁发机构、申请与获取证书、配置Web服务器、优化安全性及实际案例。帮助开发者提升应用安全性,增强用户信任。
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
91 1
安全至上:Web应用防火墙技术深度剖析与实战
【10月更文挑战第29天】在数字化时代,Web应用防火墙(WAF)成为保护Web应用免受攻击的关键技术。本文深入解析WAF的工作原理和核心组件,如Envoy和Coraza,并提供实战指南,涵盖动态加载规则、集成威胁情报、高可用性配置等内容,帮助开发者和安全专家构建更安全的Web环境。
117 1
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
126 2

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等