video结合canvas实现视频在线截图功能


Posted in HTML / CSS onJune 25, 2018

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

video结合canvas实现视频在线截图功能 

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

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

利用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])
})

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

利用canvas实现视频截图:

接下来就是关键步骤了,但也很简单,那就是使用 canvas 的 drawImage 方法,大家如果翻到高程三的第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;

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

实现动画效果:

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

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

该函数是获取小图片距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();
});

 

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

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

在github上的demo

总结

以上所述是小编给大家介绍的video结合canvas实现视频在线截图功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
css3 选择器
May 11 HTML / CSS
CSS的calc函数用法小结
Jun 25 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 HTML / CSS
详解Canvas事件绑定
Jun 27 #HTML / CSS
Html5剪切板功能的实现代码
Jun 29 #HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 #HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 #HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 #HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 #HTML / CSS
canvas绘制表情包的示例代码
Jul 09 #HTML / CSS
You might like
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
网友原创的PHP模板类代码
2008/09/07 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
深入浅析Python字符编码
2015/11/12 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
python名片管理系统开发
2020/06/18 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
电视购物广告词
2014/03/19 职场文书
初三班主任寄语大全
2014/04/04 职场文书
还款承诺书范文
2014/05/20 职场文书
服务行业口号
2014/06/11 职场文书
win10清理dns缓存
2022/04/19 数码科技