最近开始研究Html5,感觉功能很强大，下面做个实现拍照上传功能的例子。

一.视图：注意，在不同的浏览器有不同的navigator格式，其他类型浏览器的格式大家可以直接网上找到，这里就不列举了
 <!DOCTYPE html>

 <html>

 <head>

     <title></ title>

 </head>

 <body>

     <script src="@ Url.Content("~/Scripts/jquery-1.4..min.js")" type="text/javascript"></script>

     <video id="myVideo" autoplay="autoplay"></video >

     <br />

     <input type="button" value="拍照" />

     <br />

     拍照结果：

     <div id="result">

     </div>

     <script type="text/javascript">

         $(document).ready(init);

         var video_element = document.getElementById('myVideo');

         function init() {

             //Google Chrome要用webkitGetUserMedia函式

             navigator.webkitGetUserMedia({ video: true }, success);   //显示影像

             //定义button点选后要做什么

             $( "input[type='button']").click(function () {

                 shoot(); //执行拍照

             });

         }

         function success(stream) {

             video_element.src =stream;

             $( "#myVideo").attr("src" , window.webkitURL.createObjectURL(stream));

         }

         //执行拍照

         function shoot() {

             var video = $("#myVideo" )[];

             var canvas = capture(video);

             $( "#result").empty();

             $( "#result").append(canvas); //呈现图像(拍照结果)

             var imgData = canvas.toDataURL("image/jpg" );

             var base64String = imgData.substr(); //取得base64字符串

             //上传，储存图片

             $.ajax({

                 url: '@ Url.Action("ApplyForApp", "Handler", new { Area = "PhotoUpload" }) ',

                 type: "post",

                 data: { data: base64String },

                 async: true,

                 success: function (htmlVal) {

                     alert( "另存图片成功！" );

                 }, error: function (e) {

                     alert(e.responseText); //alert错误讯息

                     alert( "程序出错！" );

                 }

             });

         }

         //从video元素抓取图像到canvas

         function capture(video) {

             var canvas = document.createElement('canvas' ); //建立canvas js DOM元素

             canvas.width = video.videoWidth;

             canvas.height = video.videoHeight;

             var ctx = canvas.getContext('2d' );

             ctx.drawImage(video, , );

             return canvas;

         }

     </script>

 </body>

 </html>
二.控制器：
         public string ApplyForApp(string data, int affairsid)

         {

             var UserName = HttpContext.User.Identity.Name.Split(',')[];

             AffairsDataRepository rep = new AffairsDataRepository();

             AffairsDataModel affairsdata = new AffairsDataModel();

             //HttpContext context = null;

             //context.Response.ContentType = "text/plain";

             string base64String = data;//context.Request["data"];

             Image img = this.Base64ToImage(base64String);

             var name = DateTime.Now.ToString("yyyyMMddhhmmss")+".jpg";

             img.Save(@"D:\VS2010\Myproject\Project\最新\ComPublishWeb\ComPublishWeb\PhotoUpload\" + name);//储存图片

             affairsdata.Dataname = name;

             affairsdata.Url = "D:\\VS2010\\Myproject\\Project\\最新\\ComPublishWeb\\ComPublishWeb\\PhotoUpload\\" + name;

             affairsdata.Uploadtime = DateTime.Now.ToString();

             affairsdata.Uploadernum = UserName;

             affairsdata.AffairsID = affairsid;

             rep.SavePhotoUpload(affairsdata);

             return "上传成功！";

         }

         //把base64字符串转成Image对象

         public Image Base64ToImage(string base64String)

         {

             // Convert Base64 String to byte[]

             byte[] imageBytes = Convert.FromBase64String(base64String);

             MemoryStream ms = new MemoryStream(imageBytes, ,

               imageBytes.Length);

             // Convert byte[] to Image

             ms.Write(imageBytes, , imageBytes.Length);

             Image image = Image.FromStream(ms, true);

             return image;

         }

三.Models:

         public void SavePhotoUpload(AffairsDataModel data)

         {

             AffairsMSLinqDataContext db = new AffairsMSLinqDataContext();

             AffairsData affairsdata = new AffairsData();

             affairsdata.dataname = data.Dataname;

             affairsdata.url = data.Url;

             affairsdata.uploadernum = data.Uploadernum;

             affairsdata.uploadtime = DateTime.Parse(data.Uploadtime);

             affairsdata.affairsID = data.AffairsID;

             db.AffairsData.InsertOnSubmit(affairsdata);

             db.SubmitChanges();

             return;

         }

大致的过程就是这样了，如果有什么不懂得，欢迎交流。

HTML5 实现拍照上传的更多相关文章

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

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

  2. 【Demo】HTML5 拍照上传

    本文主要讲解 手机浏览器 如何拍照 为什么会有这个需求 最近做一个项目要用到拍照然后上传照片,但是网页拍照一般都是用Flash做的,而我们主要是H5页面,如果在微信里面有权限就可以通过JSSDK调起摄 ...

  3. HTML5手机端拍照上传

    1.accept="image/*" capture="camera" 自动调用手机端拍照功能 accept="image/*" captu ...

  4. webAPP如何实现移动端拍照上传（Vue组件示例）？

    摘要:使用HTML5编写移动Web应用,主要是为了尝试一下“一套代码多处运行”,一个webapp几乎可以不加修改的运行在PC/Android/iOS等上面运行.但是写到现在觉得虽然这种方式弊大于利,不 ...

  5. iOS拍照上传后，在web端显示旋转 Swift＋OC版解决方案

    问题描述: 手机头像上传,遇到一个怪现象,就是拍照上传时,手机端显示头像正常,但在web端查看会有一个左旋90度的问题. 并且照片竖怕才会有此问题,横拍不存在. 原因分析: 手机拍照时,用相机拍摄出来 ...

  6. Android4.4 + WebAPI 实现拍照上传

    网上有很多关于拍照上传的实现方法,如果用新版本android去运行有可能会发现根本实现不了.主要原因是android从4.4版本开始通过intent.ACTION_GET_CONTENT打开选择器后, ...

  7. php实现手机拍照上传头像功能

    现在手机拍照很火,那么如何使用手机拍照并上传头像呢?原因很简单,就是数据传递,首先手机传递照片信息,这个就不是post传递 也不是get函数传递, 这个另外一种数据格式传递,使用的是$GLOBALS ...

  8. Html5实现头像上传和编辑，保存为Base64的图片过程

    一.Html5实现头像上传和编辑 插件地址: html5手机端裁剪图片上传头像代码 本地项目引入注意事项: 1.将html的js搬到外面的js文件中,便于管理 2.图片样式在html都是在页面写死,需 ...

  9. Android仿微信图片上传，可以选择多张图片，缩放预览，拍照上传等

    仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...

随机推荐

  1. Javascript闭包的一些研究

    原文:Javascript闭包的一些研究 本文不谈闭包的概念,因为概念容易把人搞晕,本文希望通过几个鲜活的例子来探究闭包的性质,相信对理解闭包会有所帮助. 程序1 var f = (function( ...

  2. javascript权威指南(1)

    javascript常用知识点: http://www.cnblogs.com/pingfan1990/p/4309223.html Function.prototype.bind()Function ...

  3. 【高德API】如何利用MapKit开发全英文检索的iOS地图

    原文:[高德API]如何利用MapKit开发全英文检索的iOS地图 制作全英文地图的展示并不困难,但是要制作全英文的数据检索列表,全英文的信息窗口,你就没办法了吧.告诉你,我有妙招!使用iOS自带的M ...

  4. 【百度地图API】交你如何用百度地图搜索自己的数据！不需数据库！

    原文:[百度地图API]交你如何用百度地图搜索自己的数据!不需数据库! 摘要: 我有一定的房产数据,还有银行数据.我想在百度地图上标注出来,并且能搜索到我这些数据. 可是百度的数据库上并没有我的数据. ...

  5. 使用Jenkins来构建Docker容器

    使用Jenkins来构建Docker容器(Ubuntu 14.04) 当开发更新了代码,提交到Gitlab上,然后由测试人员触发Jenkins,于是一个应用的新版本就被构建了.听起来貌似很简单,dua ...

  6. MVC验证08-jQuery异步验证

    原文:MVC验证08-jQuery异步验证 本文主要体验通过jQuery异步验证. 在很多的教材和案例中,MVC验证都是通过提交表单进行的.通过提交表单,可以很容易获得验证出错信息.因为,无论是客户端 ...

  7. 转载+自练（莫喷）怎样在cocos2d 2.1.4里面使用动画和Texture Packer

    本文实践自 Ray Wenderlich.Tony Dahbura 的文章<How to Use Animations and Sprite Sheets in Cocos2D 2.X>, ...

  8. 分区表在安装系统（MBR）丢失或损坏

    操作系统能识别出硬盘中的各个不同的分区,是靠硬盘分区表(MBR)来识别的. 硬盘分区表中记录了各个分区的位置和大小以及类型等信息,假设这个分区表破坏了,那么这块硬盘里面的分区就会丢失.系统是无法在浏览 ...

  9. C#中使用消息队列RabbitMQ

    在C#中使用消息队列RabbitMQ 2014-10-27 14:41 by qy1141, 745 阅读, 2 评论, 收藏, 编辑 1.什么是RabbitMQ.详见 http://www.rabb ...

  10. SQL Server 行版本控制

    什么时候开启行版本? 当发现系统中存在大量读写阻塞的时候,就是我们开启行版本的时候了.要点:写写阻塞的场景行版本技术解决不了 开启方式: -- 设置为单用户 ALTER DATABASE MyTest ...