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 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 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实现框架(二)
2006/10/09 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
python共享引用(多个变量引用)示例代码
2013/12/04 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
法学毕业生自荐信
2013/11/13 职场文书
学校司机岗位职责
2013/11/14 职场文书
亲子拓展活动方案
2014/02/20 职场文书
总经理任命书
2014/03/29 职场文书
质量提升方案
2014/06/16 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript