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 相关文章推荐
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
纯html+css实现Element loading效果
Aug 02 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 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
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
室内设计专业个人的自我评价
2013/10/19 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
家长会演讲稿
2014/04/26 职场文书
班级文化建设标语
2014/06/23 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
三好学生评语大全
2014/12/29 职场文书
音乐课外活动总结
2015/05/09 职场文书
乱世佳人观后感
2015/06/08 职场文书
红色影片观后感
2015/06/18 职场文书
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android
Apache自带的ab压力测试工具的实现
2022/07/23 Servers