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

    一.C#数组删除元素 在C#中,只能在动态数组ArrayList类中对数组执行删除元素的操作.因为动态数组是一个可以改变数组长度和元素个数的数据类型. 示例: using System;using S ...

  2. CF #552 div3

    A - Restoring Three Numbers CodeForces - 1154A Polycarp has guessed three positive integers aa, bb a ...

  3. k8s资源指标API及metrics-server资源监控

    简述: 在k8s早期版本中,对资源的监控使用的是heapster的资源监控工具. 但是从 Kubernetes 1.8 开始,Kubernetes 通过 Metrics API 获取资源使用指标,例如 ...

  4. ipvsadm分发MySQL读请求

    在MySQL的部署场景中,经常使用HAproxy和ipvs来作为读请求转发的网关.ipvs的好处在于本身不需要daemon的方式来运行,而是直接作为kernel的服务来提供:当ipvs和应用程序服务器 ...

  5. Windows7_64位 NVIDIA 卡 OpenCl环境配置

    序 最近做一个项目需要用到OpenCL,由于之前没有接触过,所以在环境配置第一关就遇到了一些问题,查阅很多资料才配置完成,现在记录如下,希望给一些童鞋一些帮助. 整个步骤也很简单: 了解系统配置,选择 ...

  6. 【原创】关于高版本poi autoSizeColumn方法异常的情况

    之前使用的3.9版本,autoSizeColumn方法一切正常,现在切换到了3.15版本这个方法就出先了问题,问题如下,无法自动追踪所有的列. Exception in thread "ma ...

  7. Android后台的linux一直保持唤醒状态，不进入睡眠

    由于要做Android手机的电池续航测试,是不能插usb的,所以把case放到sh文件中,之后push到手机里,执行的. 但是出现个问题,假如case中有很长时间的sleep操作,关闭手机屏幕,这样l ...

  8. Java技术——Java反射机制分析

    )生成动态代理. 2. Java反射API 反射API用来生成在当前Java虚拟机中的类.接口或者对象的信息. Class类:反射的核心类,可以获取类的属性,方法等内容信息. Field类:Java. ...

  9. String的getBytes()方法

    这是一篇转帖: 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/maxracer/archive/2010/12/14/6075057.aspx 在Java中,Stri ...

  10. 理一理Spring如何对接JUnit

    测试代码 package org.simonme.srcstudy.spring3.demo.stub; import static org.junit.Assert.assertNotNull; i ...