一、需求：上传视频，同时截取视频某一帧作为视频的封面。 二、实现思路：利用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>

canvas绘制视频封面--摘抄的更多相关文章

  1. 用canvas给视频图片添加特效

    Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体 ...

  2. canvas绘制video

    html <video style="position: relative; object-fit: fill;" preload="auto" id=& ...

  3. 一次js自定义播放器，canvas绘制弹幕的尝试

    不多bb,就直接说实现了什么功能: 1. 视频播放进度调整 2. 视频小窗口实时预览 3. 声音调整 4. 画中画模式 5. 网页全屏 6. 视频全屏 7. canvas绘制弹幕 8. 选中弹幕悬停 ...

  4. canvas绘制图片drawImage学习

    不得不说,html5中的canvas真的非常强大,从图片处理,到视频处理,再到游戏开发,都能见到canvas的身影,然而,就这一个<canvas>标签,功能居然如此强大,这主要归功于can ...

  5. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  6. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  7. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

随机推荐

  1. label自适应文本大小

    UILabel *label = [[UILabelalloc] initWithFrame:CGRectZero]; NSString *string = @"aa2fkoksdajfis ...

  2. AutoLayout处理UITableView动态高度

    我们经常会遇到UITableViewCell的高度要跟随内容而调整,在未引入AutoLayout之前,我们使用以下方法计算Label高度,然后heightForRowAtIndexPath中返回计算的 ...

  3. css3 设置滚动条的样式

    ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-th ...

  4. pandas的数据联级

    一．索引的堆(stack) 1.行列的转化: Stack():列转行 Unstack():行转列 Stack对应行, 使用小技巧:使用stack()的时候,level等于哪一个,哪一个就消失,出现在行 ...

  5. NodeJS基础API-path相关的问题basename,extname,dirname,parse,format,sep,delimiter,win32,posix

    path 参考文档:http://nodejs.cn/api/path.html const {normalize} = require('path'); // ES6语法 // 相当于 const ...

  6. 【网络基础】【TCP/IP】IP的分级

    节选自 <鸟哥的linux私房菜>  http://cn.linux.vbird.org/linux_server/0110network_basic_3.php#ps12 InterNI ...

  7. python操作日志的封装

    前言 曾经转载过一篇关于python日志模块logging的详解 https://www.cnblogs.com/linuxchao/p/linuxchao-log.html, 虽然这篇文章是别人写的 ...

  8. crm项目之整体内容（一）

    一.项目背景 YW公司是一家电池供应商,目前由于公司内部的需要,需要做一个CRM项目,需要每一个不同角色的员工登陆系统后处理自己的事情.其流程大致如下: 其项目包括三部分内容: 1.权限分配组件(rb ...

  9. LeetCode（168） Excel Sheet Column Title

    题目 Given a positive integer, return its corresponding column title as appear in an Excel sheet. For ...

  10. stm32L011F3使用开发小记——开发坏境

    今日,因工作需要,使用到了stm32L011F3芯片,此芯片基于CM0+内核,属于低功耗芯片 开发平台可以免费用于KEILMDK,keil公司用免费的许可证,网址:https://www2.keil. ...