js+HTML5实现视频截图的方法
本文实例讲述了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+html5 canvas实现本地截图教程
最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传<JavaScript File API文件上传预览>,更加觉得html5好玩了,想着也试试写写这功能权当学习canvas吧. 下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^ 功能实现步奏: 一.获取文件,读取文件并生成url 二.
-
分享js粘帖屏幕截图到web页面插件screenshot-paste
在很多场合下,我们可能有这样的需求:提供个屏幕截图上传到系统,作为一个凭证.传统的操作方式是:屏幕截图,保存文件到本地,在web页面上选择本地文件并上传,这里至少需要三步.有没有可能直接将截图粘帖到web页面上,然后上传?答案是:可以的.这就是本文要介绍的内容了. 由于我的项目有上传屏幕截图这样的需求,为了用户体验更佳,减少操作步骤,我在网上搜了一遍之后,找到了一些眉目.为了便于复用和共享,我又对该功能做了一些封装,于是便有了这个插件 screenshot-paste.运行效果如下图: 插件调用
-
THINKPHP+JS实现缩放图片式截图的实现
作者:杨鑫奇 原始链接:http://www.cnblogs.com/scotoma/archive/2010/03/05/1679477.html 今晚TP论坛的一位大哥加我了,说也遇到这个方面的问题,呵呵!想想其实很多东西都遇到了,是不是应该分享出来呢?其实自己的很多东西都是别人那来的,取之于网络用之于网络!只有大家多分享,才能够提高! 实现方式 上传图片 -- 保存并显示图片 -- JS获取缩略图参数 -- 提交位置参数 -- 图片缩放保存类处理图片 -- 保存截取的图片--更新数据库 -
-
JavaScript实现网页截图功能
使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像:但是光有它还不够,我们需要给任意DOM(至少是绝大部分)截图,这就需要html2canvas,它可以将DOM对象转换成一个canvas对象.两者的功能结合起来,就可以把页面上的DOM截图成PNG或者JPEG图像了,很酷. Canvas2Image 它的原理是利用了HTML5的canvas对象提供了toDataURL()的API: 复制代码 代码如下:
-
JS图片自动轮换效果实现思路附截图
今天不在状态,安静五一快到了,俺就特想玩了.好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自动轮换效果,先看图片 下面是具体的代码,还是比较简单的. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x
-
JS实现div模块的截图并下载功能
当需要实现html页面部分模块截图并具有保存图片功能时,前台直接生成截图并下载会方便的多.多的不说,直接看代码 首先我们需要引入2个js文件: <script type="text/javascript" src="js/html2canvas.js"></script> <script type="text/javascript" src="js/jquery-1.12.3.min.js">
-
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
利用PhantomJS做网页截图经济适用,但其API较少,做其他功能就比较吃力了.例如,其自带的Web Server Mongoose最高只能同时支持10个请求,指望他能独立成为一个服务是不怎么实际的.所以这里需要另一个语言来支撑服务,这里选用NodeJS来完成. 安装PhantomJS 首先,去PhantomJS官网下载对应平台的版本,或者下载源代码自行编译.然后将PhantomJS配置进环境变量,输入 $ phantomjs 如果有反应,那么就可以进行下一步了. 利用PhantomJS进行简
-
javascript在网页中实现读取剪贴板粘贴截图功能
见某网站的输入框支持截屏粘贴的功能,觉得有点意思,于是将代码扒出来分享下. 可惜,目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴( IE11没测试过 ),当然这种增强型的用户体验功能有总比没有好. 输入框的结构代码: 复制代码 代码如下: <input type="text" id="testInput" /> 为输入框绑定粘贴事件: 复制代码 代码如下: var input = document.getElemen
-
js+HTML5实现视频截图的方法
本文实例讲述了js+HTML5实现视频截图的方法.分享给大家供大家参考.具体如下: 1. HTML部分: <video id="video" controls="controls"> <source src=".mp4" /> </video> <button id="capture">Capture</button> <div id="output&
-
js+html5操作sqlite数据库的方法
本文实例讲述了js+html5操作sqlite数据库的方法.分享给大家供大家参考,具体如下: //copyright by lanxyou lanxyou[at]gmail.com var lanxDB=function(dbname){ var db=openDatabase(dbname,'1.0.0','',65536); return{ //返回数据库名 getDBName:function(){ return dbname; }, //初始化数据库,如果需要则创建表 init:func
-
js HTML5 canvas绘制图片的方法
本文实例为大家分享了HTML5 canvas绘制图片的具体代码,供大家参考,具体内容如下 demo.js window.onload=function() { createcanvas(); drawImage(); } function createcanvas() { var CANVAS=document.getElementById('mycanvas'); context=CANVAS.getContext('2d'); } function drawImage() { var img
-
Java实现对视频进行截图的方法【附ffmpeg下载】
本文实例讲述了Java实现对视频进行截图的方法.分享给大家供大家参考,具体如下: 之前介绍过Java使用ffmpeg进行视频转换,这里演示一下ffmpeg进行视频截图的方法. 具体代码如下: import java.io.File; import java.util.List; //生成视频文件的首帧为图片 //windows下的版本 public class CreatePh { // public static final String FFMPEG_PATH = "E:/ffmpeg/ff
-
js+HTML5基于过滤器从摄像头中捕获视频的方法
本文实例讲述了js+HTML5基于过滤器从摄像头中捕获视频的方法.分享给大家供大家参考.具体如下: index.html页面: <div class="warning"> <h2>Native web camera streaming (getUserMedia) is not supported in this browser.</h2> </div> <div class="container"> &l
-
js+html5实现canvas绘制网页时钟的方法
本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的.带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <script type="tex
-
js+html5获取用户地理位置信息并在Google地图上显示的方法
本文实例讲述了js+html5获取用户地理位置信息并在Google地图上显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <p id="demo">Click the button to get your position:</p> <button onclick="getLocation()">Try It</button&
-
js+html5实现canvas绘制简单矩形的方法
本文实例讲述了js+html5实现canvas绘制简单矩形的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not sup
-
js+HTML5实现canvas多种颜色渐变效果的方法
本文实例讲述了js+HTML5实现canvas多种颜色渐变效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not s
-
js+html5通过canvas指定开始和结束点绘制线条的方法
本文实例讲述了js+html5通过canvas指定开始和结束点绘制线条的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does n
随机推荐
- ajax快速解决参数过长无法提交成功的问题
- SQL2005学习笔记 APPLY 运算符
- 如何更好的使用Java8中方法引用详解
- SpringMVC存取Session的两种方法
- Swift调用Objective-C代码
- 使用ASP.NET MVC 4 Async Action+jQuery实现消息通知机制的实现代码
- javascript实现延时显示提示框特效代码
- JSP连接SQL Server 2000系统配置
- 浅谈vuex之mutation和action的基本使用
- 详解vue.js全局组件和局部组件
- javascript:以前写的xmlhttp池,代码
- Nginx为Tomcat服务器作反向代理的配置教程
- 浅谈C#下winform和JS的互相调用和传参(webbrowser)
- JQuery 动态生成Table表格实例代码
- jQuery UI Autocomplete 1.8.16 中文输入修正代码
- jquery中$.post()方法的简单实例
- JSON为什么那样红为什么要用json(另有洞天)
- Javascript数组的排序 sort()方法和reverse()方法
- C语言解决螺旋矩阵算法问题的代码示例
- java音乐播放器编写源码