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 相关文章推荐
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 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
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
深入分析PHP设计模式
2020/06/15 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
JS实现点击掉落特效
2021/01/29 Javascript
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
Python数据库小程序源代码
2019/09/15 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
HTML5实现预览本地图片
2016/02/17 HTML / CSS
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
小学生思想品德评语
2014/12/31 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
运动会运动员赞词
2015/07/22 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python