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实现自定义滚动条代码分享
Aug 18 HTML / CSS
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 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
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
jquery的ajax请求全面了解
2013/03/20 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
DELPHI面试题研发笔试试卷
2015/11/08 面试题
幼儿园义卖活动方案
2014/01/17 职场文书
施工协议书范本
2014/04/22 职场文书
龙门石窟导游词
2015/02/02 职场文书
网络妈妈观后感
2015/06/08 职场文书
运动会宣传稿50字
2015/07/23 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书