一、需求：上传视频，同时截取视频某一帧作为视频的封面。 二、实现思路：利用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. skynet 学习笔记-sproto模块（2）

    云风在skynet中继承了sproto的传输协议,对比protobuf的好处是,能明文看到传输内容,而且skynet不需要protobuf这么功能,所以云风也建议在lua层使用sproto来作为sky ...

  2. Object-C知识点 (六) 开发中的技巧

    本文主要介绍开发中的一些实用技巧 #pragma mark - 代码控制Home按键 [[UIApplication sharedApplication] performSelector:@selec ...

  3. on() 和 click() 的区别

    on() 和 click() 的区别: 二者在绑定静态控件时没有区别,但是如果面对动态产生的控件,只有 on() 能成功的绑定到动态控件中. 以下实例中原先的 HTML 元素点击其身后的 Delete ...

  4. MFC里 显示设备上下文CClient dc(this) 和 CPaintDC dc(this)

    1 CPaintDC类(1)CPaintDC类是CDC类的一个派生类,该类一般用在响应WM_PAINT消息的函数OnPaint()中.(2)WM_PAINT消息是当窗口的某个区域需要重画时激发的窗口消 ...

  5. SAP行列转换的一种方法

    一段经典的代码写在这里 TABLES spfli. DATA: lt_data TYPE STANDARD TABLE OF spfli, lwa_ref TYPE REF TO data, lt_f ...

  6. Spring Boot 应用 快速发布到linux服务器的脚本代码示例

    前提说明:spring boot 应用打包成jar包之后要部署到Linux服务器上面运行,我用的nohup java -jar 命令,但是代码更新之后重新部署的时候覆盖原来的项目,又要手动运行ps - ...

  7. CentOs 6.5设置使用私钥登录关闭ssh的密码登录修改ssh默认端口

    使用SecureCRT工具创建RSA公钥和私钥 [选项]=>[会话选项] 然后在弹出对话框中选择[公钥]然后点击[属性]: 在弹出窗口中选中[使用会话公钥设置],点击[创建身份文件]按钮: 然后 ...

  8. python爬虫基础12-selenium大全6/8-等待

    Selenium笔记(6)等待 本文集链接:https://www.jianshu.com/nb/25338984 简介 在selenium操作浏览器的过程中,每一次请求url,selenium都会等 ...

  9. 原来针对新唐mcu，keil有免费许可

    MDK for Nuvoton Cortex-M0/M23:The MDK for Nuvoton Cortex-M0/M23 is a license paid by Nuvoton. It is  ...

  10. STM32F407VET6之IAR之ewarm7.80.4工程建立（基于官方固件库1.6版本）

    今天把stm32F407的工程之IAR建立完成了,特此记录下. 下载官方固件库,STM32F4xx_DSP_StdPeriph_Lib_V1.6.1,V1.8.0版本的同理.新建以下几个文件 src放 ...