canvas绘制视频封面的方法


Posted in HTML / CSS onFebruary 05, 2018

一、需求:上传视频,同时截取视频某一帧作为视频的封面。

canvas绘制视频封面的方法

二、实现思路:利用canvas绘制图像的功能,绘制图像某一帧,这里绘制了第一帧,很简单就实现了。

三、代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>capture screen</title>
    <style type="text/css">
        video,#container{width: 300px;height: 200px;}
        #container>img{width: 100%;}
    </style>
</head>
<body>
    <video id="video" controls="controls">
        <source src="video/video_test.mp4">
    </video>
    <div id="container"></div>
    <script type="text/javascript">
        (function() {
            var video, container;
            var scale = 0.8;
            var initialize = function() {
                container = document.getElementById("container");
                video = document.getElementById("video");
                video.addEventListener('loadeddata', captureImage);
            };
            var captureImage = function() {
                var canvas = document.createElement("canvas");
                canvas.width = video.videoWidth * scale;
                canvas.height = video.videoHeight * scale;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                var img = document.createElement("img");
                img.src = canvas.toDataURL("image/png");//转换成base64图片,地址拿出来就可以直接使用
                container.appendChild(img);
            };
            initialize();
        })();
    </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 #HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 #HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 #HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 #HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 #HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 #HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 #HTML / CSS
You might like
聊天室php&amp;mysql(三)
2006/10/09 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
实习生个人的自我评价
2013/12/08 职场文书
甲方资料员岗位职责
2013/12/13 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
代收款委托书范本
2014/10/01 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书