js+HTML5实现视频截图的方法


Posted in Javascript onJune 16, 2015

本文实例讲述了js+HTML5实现视频截图的方法。分享给大家供大家参考。具体如下:

1. HTML部分:

<video id="video" controls="controls">
  <source src=".mp4" />
</video>
<button id="capture">Capture</button>
<div id="output"></div>

2. 点击按钮时触发如下代码:

(function() {
  "use strict";
  var video, $output;
  var scale = 0.25;
  var initialize = function() {
    $output = $("#output");
    video = $("#video").get(0);
    $("#capture").click(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();
    $output.prepend(img);
  };
  $(initialize);      
}());

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
AngularJS中的过滤器使用详解
Jun 16 #Javascript
简述AngularJS的控制器的使用
Jun 16 #Javascript
详解AngularJS中的表达式使用
Jun 16 #Javascript
整理AngularJS中的一些常用指令
Jun 16 #Javascript
创建你的第一个AngularJS应用的方法
Jun 16 #Javascript
详解JavaScript中的表单验证
Jun 16 #Javascript
详解JavaScript中的异常处理方法
Jun 16 #Javascript
You might like
《心理测量者3》剧场版动画预告
2020/03/02 日漫
php session安全问题分析
2011/06/24 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
Python常用算法学习基础教程
2017/04/13 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
销售顾问的岗位职责
2013/11/13 职场文书
法学院方阵解说词
2014/01/29 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
自动一体化专业求职信
2014/03/15 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
校园广播稿100字
2014/10/06 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
Django rest framework如何自定义用户表
2021/06/09 Python
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
解决vue中provide inject的响应式监听
2022/04/19 Vue.js