这个是前台HTML的代码。

 <div id="contentHolder">
<video id="video" width="320" height="320" autoplay></video>
<button id="snap" style="display:none"> 拍照</button>
<canvas style="display:none" id="canvas" width="320" height="320"></canvas>
</div>

下面这个是主要代码了。(jquery)

 <script>
//判断浏览器是否支持HTML5 Canvas
window.onload = function () {
try {
//动态创建一个canvas元 ,并获取他2Dcontext。如果出现异常则表示不支持
document.createElement("canvas").getContext("2d");
document.getElementByIdx("support").innerHTML = "浏览器支持HTML5 CANVAS";
}
catch (e) {
document.getElementByIdx("support").innerHTML = "浏览器不支持HTML5 CANVAS"; } };
//这段代 主要是获取摄像头的视频流并显示在Video 签中
window.addEventListener("DOMContentLoaded", function () {
var canvas = document.getElementByIdx("canvas"),
context = canvas.getContext("2d"),
video = document.getElementByIdx("video"),
videoObj = { "video": true },
errBack = function (error) {
console.log("Video capture error: ", error.code);
};
//navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow
if (navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia)
{
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
//这个是拍照按钮的事件,
$("#snap").click(function () {
context.drawImage(video, 0, 0, 320, 320);
//CatchCode();
});
}, false);
//定时器
var interval = setInterval(CatchCode, "300");
//这个是 刷新上 图像的
function CatchCode() {
$("#snap").click();
//实际运用可不写,测试代 , 为单击拍照按钮就获取了当前图像,有其他用途
var canvans = document.getElementByIdx("canvas");
//获取浏览器页面的画布对象
//以下开始编 数据
var imgData = canvans.toDataURL(); //将图像转换为base64数据
var base64Data = imgData.substr(22); //在前端截取22位之后的字符串作为图像数据
//开始异步上
$.post("uploadImgCode.ashx", { "img": base64Data },
  function (data, status) {
    if (status == "success") {
       if (data == "OK") {
         alert("二维 已经解析");
           }else {
            // alert(data);
         }
        } else {
alert("数据上 失败");
   }
   }, "text");
}
</script>
最后的就是接收经过base64编码之后的图像文件了。 public void ProcessRequest (HttpContext context) {
string img;
//接收经过base64编 之后的字符串
context.Response.ContentType = "text/plain";
try {
img =context.Request["img"].ToString();//获取base64字符串
byte[] imgBytes = Convert.FromBase64String(img);//将base64字符串转换为字节数组
System.IO.Stream stream = new System.IO.MemoryStream(imgBytes);//将字节数组转换为字节流
//将流转回Image,用于将PNG 式照片转为jpg,压缩体积以便保存。
System.Drawing.Image imgae = System.Drawing.Image.FromStream(stream);
imgae.Save(context.Server.MapPath("~/Test/") + Guid.NewGuid().ToString()+".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);//保存图片
context.Response.Write("OK");//输出调用结果
}
catch (Exception msg) {
img = null;
context.Response.Write(msg);
return;
}
}

利用html5调用本地摄像头拍照上传图片的更多相关文章

  1. 利用html5调用本地摄像头拍照上传图片[转]

    利用html5调用本地摄像头拍照上传图片   html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...

  2. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  3. 调用本地摄像头拍照(H5和画布)

    关于H5 和 画布 调用本地摄像头拍照功能的实现 1.代码的实现(html部分) <input type="button" title="开启摄像头" v ...

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

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

  5. getUserMedia API及HTML5 调用手机摄像头拍照

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  6. html5调用手机摄像头,实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  7. H5混合开发二维码扫描以及调用本地摄像头

    今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底 ...

  8. HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 调用本地摄像头并通过canvas拍照

    首先我们需要新建一个video标签,并且放到html里边 var video = document.createElement("video"); video.autoplay=& ...

随机推荐

  1. 使用Spring的JAVA Mail支持简化邮件发送

    http://www.cnblogs.com/codeplus/archive/2011/11/03/2232893.html

  2. Docker中搭建Hadoop-2.6单机伪分布式集群

    1 获取一个简单的Docker系统镜像,并建立一个容器. 1.1 这里我选择下载CentOS镜像 docker pull centos 1.2 通过docker tag命令将下载的CentOS镜像名称 ...

  3. 三进制状压 HDOJ 3001 Travelling

    题目传送门 题意:从某个点出发,所有点都走过且最多走两次,问最小花费 分析:数据量这么小应该是状压题,旅行商TSP的变形.dp[st][i]表示状态st,在i点时的最小花费,用三进制状压.以后任意进制 ...

  4. ZOJ3229 Shoot the Bullet(有源汇流量有上下界网络的最大流)

    题目大概说在n天里给m个女孩拍照,每个女孩至少要拍Gi张照片,每一天最多拍Dk张相片且都有Ck个拍照目标,每一个目标拍照的张数要在[Lki, Rki]范围内,问最多能拍几张照片. 源点-天-女孩-汇点 ...

  5. ccc tiledmap 获取元素属性

    cc.Class({ extends: cc.Component, properties: { elementLable: { default: null, type : cc.Label }, ma ...

  6. eclipse 高亮配对的括号

    在编辑代码框右键->preference,直接就可以看到Matching brackets highlights

  7. 【转】Android之自定义Adapter的ListView

    http://www.cnblogs.com/topcoderliu/archive/2011/05/07/2039862.html 在开发中,我们经常使用到ListView这个控件.Android的 ...

  8. Issues I encountered when building Windows Store apps on a new laptop

    I took over my beloved wives samsung ativ book 9 recently as her first job granted her a brandnew su ...

  9. Android js相互调用

    一.webview相当于android中的浏览器,基于webkit开发,可以浏览网页文件,支持css javas cript 以及html webview.getSettings().setJavaS ...

  10. 透过现象看现象(SQL501N错误处理)

    某日一直运行比较正常的报表系统,突然报存储过程执行失败,查看DB2 错误返回码为sql501n,查看此错误原因如下: [db2inst1@limt ~]$ db2 ? sql501n SQL0501N ...