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的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
CI框架常用方法小结
2016/05/17 PHP
yii2安装详细流程
2018/05/23 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
package.json文件配置详解
2017/06/15 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
Python实现的桶排序算法示例
2017/11/29 Python
python2.7安装图文教程
2018/03/13 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
如何利用find命令查找文件
2016/11/18 面试题
手机促销活动方案
2014/02/05 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
保护地球的宣传语
2015/07/13 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python