1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
  5. <script type="text/javascript" src="/js/jquery1.8.3.js"></script>
  6. <title>在线拍照</title>
  7. </head>
  8. <body>
  9. <video id="camVideo" width="400" height="328" autoplay></video> <br />
  10. <button  id="snap">抓图</button> <br />
  11. <table>
  12. <tr>
  13.  <td><canvas id="canvas" width="400" height="328" /></td><td><input name="imgData" id="imgData" style="width:600px"/></td>
  14. </tr>
  15. </table>
  16. <script>
  17.  
  18. $(function(){
  19.      // 获取元素，创建配置
  20.     var canvas = document.getElementById("canvas");
  21.     var context = canvas.getContext("2d");
  22.     var video = document.getElementById("camVideo");
  23.     var videoObj = { "video": true };
  24.     var errBack = function(error) {
  25.       console.log("Video capture error: ", error.code);
  26.     };
  27.  
  28.   // 添加视频监听器
  29.   if(navigator.getUserMedia) { // 标准的API
  30.     navigator.getUserMedia(videoObj, function(stream) {
  31.       video.src = stream;
  32.       video.play();
  33.     }, errBack);
  34.   } else if(navigator.webkitGetUserMedia) { // WebKit 核心的API
  35.     navigator.webkitGetUserMedia(videoObj, function(stream){
  36.       video.src = window.webkitURL.createObjectURL(stream);
  37.       video.play();
  38.     }, errBack);
  39.   } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
  40.     navigator.mozGetUserMedia(videoObj, function(stream){
  41.         video.src = window.URL.createObjectURL(stream);
  42.         video.play();
  43.      }, errBack);
  44.   }
  45.  
  46.    document.getElementById("snap").addEventListener("click", function() {
  47.    context.drawImage(video, 0, 0, 400, 328);
  48.    var dataUrl = context.canvas.toDataURL("image/png");
  49.       $( "#imgData" ).val( dataUrl );
  50.    });
  51. });
  52. </script>
  53. </body>
  54. </html>

HTML5实现在线抓拍的更多相关文章

  1. HTML5 Maker – 在线轻松制作 HTML5 动画效果

    HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...

  2. HTML5简易在线画图工具

    继上次学习了HTML5的路径画圆做了动态时钟.异次元空间的反转做了运动的太阳系,这两天将画线.画圆.填充等知识点结合起来做了一个简易的在线画图工具: 查看DEMO:HTML5简易在线画图工具 功能包括 ...

  3. HTML5的在线视频播放方案

    移动端H5音频与视频问题及解决方案 看下最后实际效果:兼容PC,iphone, 安卓5.0 解决了,手动,自动,不全屏的问题 左边视频代替了动画,然后支持背景蒙板效果,能够透出底图 右边是原视频文件 ...

  4. HTML5 canvas 在线画笔绘图工具（一）

    HTML5 canvas 在线画笔绘图工具(一) 功能介绍 这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与我一样的初学者做为学习的参考,同时在编写这 ...

  5. HTML5 canvas 在线画笔绘图工具（三）

    组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...

  6. Processon 一款基于HTML5的在线作图工具

    CSDN的蒋涛不久前在微博上评价说ProcessOn是web版的visio,出于好奇私下对ProcessOn进行了一番研究.最后发现无论是在用户体验上,还是在技术上,ProcessOn都比微软的Vis ...

  7. 8个经典的HTML5游戏在线试玩及源码学习

    原文地址:http://www.oschina.net/news/32364/html5-games 游戏,毫无疑问是拿来供大家娱乐玩耍的,这也无可厚非,但是,今天给大家分享的8个HTML5游戏,在好 ...

  8. HTML5 canvas 在线画笔绘图工具（二）

    Canvas+Javascript 带图标的工具条制作 TToolbar 工具条是由一个TToolbar对象和两个按钮对象(TImageButton.TColorButton)组成,因为之前我大部分时 ...

  9. HTML5 canvas 在线画笔绘图工具（四）

    HTML5画图命令 图形的绘制是由TDrawHandler与TCommand 协同工作完成. TDrawHandler需要完成以下工作 1.聚集类用于管理绘图的命令 TCommand 2.管理鼠标事件 ...

随机推荐

  1. OpenJudge 2737 大整数除法

    链接地址:http://bailian.openjudge.cn/practice/2737/ 题目: 总时间限制: 1000ms 内存限制: 65536kB 描述 求2个大的正整数相除的商 输入 第 ...

  2. Windows Phone中用到的类名及对应的命名控件及引用

    //INotifyPropertyChanged using System.ComponentModel; //ICommand using System.Windows.Input; //Actio ...

  3. AJAX安全-Session做Token

    个人思路,请大神看到了指点 个人理解token是防止扫号机或者恶意注册.恶意发表灌水,有些JS写的token算法,也会被抓出来被利用,个人感觉还是用会过期的Session做token更好,服务器存储, ...

  4. Hash算法初见

    hash算法 (hashmap 实现原理)   Hash ,一般翻译做“ 散列” ,也有直接音译为“ 哈希” 的,就是把任意长度的输入(又叫做预映射, pre-image ),通过散列算法,变换成固定 ...

  5. AOP(以MVC中的过滤器为例)

    MVC里面的Filter public class AOPFilterAttribute : ActionFilterAttribute, IExceptionFilter { public void ...

  6. Codeforces 55D Beautiful Number

    Codeforces 55D Beautiful Number a positive integer number is beautiful if and only if it is divisibl ...

  7. 说说对C语言指针的理解

    指针困扰了一些学习编程的人,或许你的老师会告诉你,指针比较难理解. 我当时被老师的话唬住所以学习指针那章的时候都没心情听课.(说得像讲别的内容时我听了似的,开玩笑) 导致了学习链表的时候各种卧槽. * ...

  8. MVC-Html.ActionLink的几种写法

    Html.ActionLink("linkText","actionName") Html.ActionLink("linkText",&q ...

  9. Vue + Webpack + Vue-loader １

    Vue + Webpack + Vue-loader 原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue ...

  10. MXNet在64位Win7下的编译安装

    注:本文原创,作者:Noah Zhang  (http://www.cnblogs.com/noahzn/) 我笔记本配置比较低,想装个轻量级的MXNet试试,装完之后报错,不是有效的应用程序,找不到 ...