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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 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更快的提供文件下载的代码
2012/06/13 PHP
php curl 上传文件代码实例
2015/04/27 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
javascript 跳转代码集合
2009/12/03 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
python决策树之C4.5算法详解
2017/12/20 Python
python实现机器学习之元线性回归
2018/09/06 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
python默认参数调用方法解析
2020/02/09 Python
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
师范生求职自荐信
2014/06/14 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
离婚财产分配协议书
2014/10/21 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript