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动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
CSS 伪元素::marker详解
Jun 26 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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
Admin generator, filters and I18n
2011/10/06 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
Sea.JS知识总结
2016/05/05 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
Python列表list排列组合操作示例
2018/12/18 Python
Python制作动态字符图的实例
2019/01/27 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
11月红领巾广播稿
2014/01/17 职场文书
创业计划书撰写原则
2014/01/25 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
学术研讨会主持词
2015/07/04 职场文书
运动会通讯稿200字
2015/07/20 职场文书