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制作网站后台管理面板
Dec 30 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
python怎么调用自己的函数
2020/07/01 Python
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
.net笔试题
2014/03/03 面试题
服务生自我鉴定
2014/01/22 职场文书
国际金融专业自荐信
2014/07/05 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
会计师事务所实习证明
2014/11/16 职场文书
2014年工程部工作总结
2014/11/25 职场文书
2014年科技工作总结
2014/11/26 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
你真的会用Mysql的explain吗
2022/03/31 MySQL
Python中第三方库Faker的使用详解
2022/04/02 Python
Python字符串格式化方式
2022/04/07 Python
Python find()、rfind()方法及作用
2022/12/24 Python