<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="telephone=no" name="format-detection" />
    <title>测试</title>
</head>
<body>
<video id="video" width="320" height="240" autoplay></video>
<button id="snap">拍摄</button>
<canvas id="canvas" width="320" height="240"></canvas>
<script>
    window.addEventListener("DOMContentLoaded", function() {
        var canvas = document.getElementById("canvas"),//调用canvas接口
                context = canvas.getContext("2d"),
                video = document.getElementById("video"),
                videoObj = { "video": true },
                errBack = function(error) {//错误处理
                    console.log("Video capture error: ", error.code);
                };
        if(navigator.getUserMedia) {//调用html5拍摄接口
            navigator.getUserMedia(videoObj, function(stream) {
                video.src = stream;//摄像机属于视频流，所以当然要输出到html5的video标签中了
                video.play();//开始播放
            }, errBack);
        } else if(navigator.webkitGetUserMedia) { //WebKit内核调用html5拍摄接口
            navigator.webkitGetUserMedia(videoObj, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);//同上
                video.play();//同上
            }, errBack);
        }
        else if(navigator.mozGetUserMedia) { //moz内核调用html5拍摄接口
            navigator.mozGetUserMedia(videoObj, function(stream){
                video.src = window.URL.createObjectURL(stream);//同上
                video.play();//同上
            }, errBack);
        }
    }, false);

    document.getElementById("snap")
            .addEventListener("click", function() {//获取拍照按钮绑定事件
                var canvans = document.getElementById("canvas"),//调用canvas接口
                        context = canvas.getContext("2d");
                context.drawImage(video, 0, 0, 640, 480);//调用canvas接口的drawImage方法绘制当前video标签中的静态图片，其实就是截图

                var imgData = canvans.toDataURL();//获取图片的base64格式的数据
                //这里就可以写上传服务器代码了
            });
</script>
</body>
</html>

PC端 H5实现拍照并上传的更多相关文章

  1. jquery photoClip支持手机端,PC端 本地裁剪图片后上传插件

    支持手机,PC最好的是jquery photoClip插件,下载地址&示例:https://github.com/topoadmin/photoClip demo.html 代码: <! ...

  2. H5实现拍照并上传

    <!DOCTYPE HTML><html><head>    <meta charset="UTF-8">    <meta ...

  3. 移动端H5上传图片并压缩上传

    手头上的这个项目主要是在微信内运行的一个网站,需要用户上传手机内的照片,而现在手机照片尺寸越来越大,直接上传的话的确上传进度慢影响用户体验而且也会给服务器增加压力,所以利用H5的新特性压缩后上传不失为 ...

  4. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  5. 在OneThink（ThinkPHP3.2.3）中整合阿里云OSS的PHP-SDK2.0.4，实现Web端直传，服务端签名直传并设置上传回调的实现流程

    在OneThink(ThinkPHP3.2.3)中整合阿里云OSS的PHP-SDK2.0.4,实现本地文件上传流程 by shuijingwan · 2016/01/13 1.SDK安装 github ...

  6. Ali OSS服务端签名直传并设置上传回调

    服务端签名直传并设置上传回调 背景 请参考 Web端直传实践 里的背景介绍. 当采用服务端签名后直传方案后,问题来了,用户上传数据后,很多场景下,应用服务器都要知道用户上传了哪些文件,文件名字,甚至如 ...

  7. 在浏览器端用H5实现图片压缩上传

    一.需求的场景: 在我们的需求中需要有一个在手机浏览器端,用户实现上传证件照片的功能,我们第一版上了一个最简版,直接让用户在本地选择图片,然后上传到公司公共的服务器上. 功能实现后我们发现一个问题,公 ...

  8. 移动端h5实现拍照上传图片并预览&webuploader

    .移动端实现图片上传并预览,用到h5的input的file属性及filereader对象:经测除了android上不支持多图片上传,其他基本ok实用: 一:先说一下单张图片上传(先上代码): html ...

  9. HTML5调用本地摄像头画面，拍照，上传服务器

    实现功能和适用业务 采集本地摄像头获取摄像头画面,拍照保存,上传服务器: 前端上传图片处理,展示,缩小,裁剪,上传服务器 实现步骤 调取本地摄像头(getUserMedia)/上传图片,将图片/视频显 ...

随机推荐

  1. 页面开发辅助类—HtmlHelper初步了解

    1.1 有失必有得 在ASP.Net MVC中微软并没有提供类似服务器端控件那种开发方式,毕竟微软的MVC就是传统的请求处理响应的回归.所以抛弃之前的那种事件响应的模型,抛弃服务器端控件也理所当然. ...

  2. icecap录屏gif

    百度云下载地址:http://pan.baidu.com/s/1jIeyb4q 之前写博客,只有文字,有些效果看不出来.有了这个gif录屏工具方便很多哦,嘿嘿

  3. java的两种异常runtimeException和checkedException

    java异常处理机制主要依赖于try,catch,finally,throw,throws五个关键字.   try 关键字后紧跟一个花括号括起来的代码块,简称try块.同理:下面的也被称为相应的块. ...

  4. gSoap客户端示例程序

    先给出wsdl2h和soapcpp2的生成客户端代码 wsdl2h -s -o calc.h http://www.genivia.com/calc.wsdl soapcpp2 -i -C -x -I ...

  5. jdk，tomcat配置

    方法/步骤 一.安装JDK和Tomcat 1,安装JDK:直接运行jdk-7-windows-i586.exe可执行程序,默认安装即可. 备注:路径可以其他盘符,不建议路径包含中文名及特殊符号. 2. ...

  6. opencv鼠标操作及GUI矩形绘画

    OpenCV的鼠标操作是通过一个中介函数配合回调函数来实现的.指定鼠标操作消息回调函数的函数为SetMouseCallback. void setMouseCallback(const string& ...

  7. poj 2594 Treasure Exploration（最小路径覆盖，可重点）

    题意:选出最小路径覆盖图中所有点,路径可以交叉,也就是允许路径有重复的点. 分析:这个题的难点在于如何解决有重复点的问题-方法就是使用Floyd求闭包,就是把间接相连的点直接连上边,然后就是求最小路径 ...

  8. scroll、scrollBy和 scrollTo三种方法定位滚动条位置

    在默认情况下,页面加载完后默认滚动在最顶端,有些时候我们需要在页面打开后,定位滚动条的位置,比如,横向和纵向滚动条居中,实现页面滚动的方法有三种:scroll.scrollBy和 scrollTo,三 ...

  9. 将json转化为model

    /// <summary> /// 获取Json的Model /// </summary> /// <typeparam name="T">&l ...

  10. windows加固方案

    1     账号管理.认证授权.... 1 1.1      账号... 1 1.2      口令... 1 1.3      授权... 2 2     日志配置操作.... 3 3     IP ...