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

    在C#中,如果需要数组的长度和元素的个数随着程序的运行不断改变,就可以使用ArrayList类,该类是一个可以动态增减成员的数组. 一.ArrayList类的常用属性和方法 1. ArrayList类 ...

  2. java中异常处理机制 throw抛出自定义业务逻辑异常 throws继续抛出 catch捕获后会自动继续抛向调用方法

    package com.swift; public class Exception_TestC { public static void main(String[] args) { /* * 第5题: ...

  3. stringByAppendingString和stringByAppendingPathComponent

    NSString提供了两个拼串的方法: /** * @brief 简单的字符串拼接,头文件 NSString (NSStringExtensionMethods) * * @param aString ...

  4. React组件自适应窗口宽高

    很多时候我们需要组件能够根据窗口变化改变宽高,有时候可以使用css,有时候需要随数据调整则使用js计算. 比如说,当我们在页面中放置一个iframe时,我们希望它的宽高随着其父元素or窗口的变化而变化 ...

  5. Docker 自动运行Nginx容器

    Dockerfile文件如下: FROM ubuntu #基础镜像 RUN apt-get update #更新apt RUN apt-get -y install nginx #安装nginx VO ...

  6. Linux菜鸟起飞之路【八】文本编辑器

    在Linux中,文本编辑器有两个,VI和VIM.这两个编辑器用法差不多,但vim是vi的升级版,所以功能更强大一些. vim编辑器一共有三种模式,命令行模式.编辑模式和扩展模式. 进入vim界面,首先 ...

  7. MySQL练习50题

    介绍一个学习SQL的网站:https://sqlbolt.com/ 习题来源于网络,SQL语句是自己的练习答案,部分参考了网络上的答案. 花了一晚上的时间做完,个人认为其中的难点有:分组提取前几名的数 ...

  8. Applied Nonparametric Statistics-lec5

    今天继续two-sample test Ref: https://onlinecourses.science.psu.edu/stat464/print/book/export/html/6 Mann ...

  9. Linux下ioctl函数理解

    一. 什么是ioctl ioctl是设备驱动程序中对设备的I/O通道进行管理的函数.所谓对I/O通道进行管理,就是对设备的一些特性进行控制,例如串口的传输波特率.马达的转速等等.它的调用个数如下: i ...

  10. python网络编程相关

    什么是网络套接字socket?简述基于tcp协议的套接字的通信流程. 为了区别不同的应用程序进程和连接,许多计算机操作系统为应用程序与TCP/IP协议交互提供了称为套接字 (Socket)的接口,区分 ...