一、需求：上传视频，同时截取视频某一帧作为视频的封面。 二、实现思路：利用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. 删除sqlserver管理器登录信息缓存

    在Windows10下测试有效: C:\Users\<user>\AppData\Roaming\Microsoft\Microsoft SQL Server\100\Tools\Shel ...

  2. cocos2d-x中的字符串操作

    1:循环体中字符串的构造.      通常用于多个有规律的文件的名字,诸如:[NSString stringWithFormat:@"filed.png",i].我们可以通过spr ...

  3. mount命令的用法，以及技巧光盘镜像文件、移动硬盘及U盘的方法

    本文介绍mount命令的用法,以及技巧光盘镜像文件.移动硬盘及U盘的方法. 一,挂接命令(mount) 挂接(mount)命令的使用方法. 命令格式: 复制代码 代码如下: mount [-t vfs ...

  4. 探讨 JS 的面向对象中继承的那些事

    最近学了 JS 的面向对象,这篇文章主要是探讨 JS 的面向对象中继承的那些事. JS中继承的特点: 1.子类继承父类: 2.子类可以用父类的方法和属性 3.子类的改变可以不影响父类 下面用一个例子来 ...

  5. Hogan的安装和使用

    Hogan的安装和使用 通过npm安装hogan: npm install hogan.js --save-dev CommonJs下的使用方式: // 引入hogan var hogan = req ...

  6. 22.Yii2.0框架多表关联一对一查询之hasOne

    思路: 通过文章查它对应的分类信息 一对一的关系 控制器里 //一对一关联查询 public function actionRelatesone() { //方法一,hasOne() 用查一条文章的结 ...

  7. day24 01 初识继承

    day24 01 初识继承 面向对象的三大特性:继承,多态,封装 一.继承的概念 继承:是一种创建新类的方式,新建的类可以继承一个或者多个父类,父类又可称基类或超类,新建的类称为派生类或者子类 cla ...

  8. ARM系统调用

    参考:Linux异常处理体系结构 linux系统调用表(system call table)  Arm Linux系统调用流程详细解析-SWI ARM系统调用是通过SWI异常处理函数实现的,这里简要概 ...

  9. linux防火墙firewall使用简介

    1.firewalld的基本使用启动: systemctl start firewalld查看状态: systemctl status firewalld停止: systemctl disable f ...

  10. 1507: [NOI2003]Editor（块状链表）

    1507: [NOI2003]Editor Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 4157  Solved: 1677[Submit][Stat ...