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实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 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数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
python实现telnet客户端的方法
2015/04/15 Python
python3实现短网址和数字相互转换的方法
2015/04/28 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
python 实现敏感词过滤的方法
2019/01/21 Python
Python基础知识点 初识Python.md
2019/05/14 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
感恩小明星事迹材料
2014/05/23 职场文书
司法所长先进事迹
2014/06/02 职场文书
银行进社区活动总结
2014/07/07 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
重阳节活动总结
2014/08/27 职场文书
春风化雨观后感
2015/06/11 职场文书
python和anaconda的区别
2022/05/06 Python