HTML5 实现拍照上传
最近开始研究Html5,感觉功能很强大，下面做个实现拍照上传功能的例子。
一.视图：注意，在不同的浏览器有不同的navigator格式，其他类型浏览器的格式大家可以直接网上找到，这里就不列举了
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></ title> 5 </head> 6 <body> 7 <script src="@ Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> 8 <video id="myVideo" autoplay="autoplay"></video > 9 <br /> 10 <input type="button" value="拍照" /> 11 <br /> 12 拍照结果： 13 <div id="result"> 14 </div> 15 <script type="text/javascript"> 16 17 $(document).ready(init); 18 var video_element = document.getElementById('myVideo'); 19 function init() { 20 21 //Google Chrome要用webkitGetUserMedia函式 22 navigator.webkitGetUserMedia({ video: true }, success); //显示影像 23 24 25 //定义button点选后要做什么 26 $( "input[type='button']").click(function () { 27 shoot(); //执行拍照 28 }); 29 } 30 function success(stream) { 31 video_element.src =stream; 32 $( "#myVideo").attr("src" , window.webkitURL.createObjectURL(stream)); 33 } 34 //执行拍照 35 function shoot() { 36 37 var video = $("#myVideo" )[0]; 38 var canvas = capture(video); 39 40 41 $( "#result").empty(); 42 $( "#result").append(canvas); //呈现图像(拍照结果) 43 var imgData = canvas.toDataURL("image/jpg" ); 44 var base64String = imgData.substr(22); //取得base64字符串 45 46 //上传，储存图片 47 $.ajax({ 48 url: '@ Url.Action("ApplyForApp", "Handler", new { Area = "PhotoUpload" }) ', 49 type: "post", 50 data: { data: base64String }, 51 async: true, 52 success: function (htmlVal) { 53 alert( "另存图片成功！" ); 54 }, error: function (e) { 55 alert(e.responseText); //alert错误讯息 56 alert( "程序出错！" ); 57 } 58 59 }); 60 } 61 62 //从video元素抓取图像到canvas 63 function capture(video) { 64 65 var canvas = document.createElement('canvas' ); //建立canvas js DOM元素 66 canvas.width = video.videoWidth; 67 canvas.height = video.videoHeight; 68 var ctx = canvas.getContext('2d' ); 69 ctx.drawImage(video, 0, 0); 70 return canvas; 71 } 72 </script> 73 </body> 74 </html>
二.控制器：
1 public string ApplyForApp(string data, int affairsid) 2 { 3 var UserName = HttpContext.User.Identity.Name.Split(',')[0]; 4 AffairsDataRepository rep = new AffairsDataRepository(); 5 AffairsDataModel affairsdata = new AffairsDataModel(); 6 //HttpContext context = null; 7 //context.Response.ContentType = "text/plain"; 8 string base64String = data;//context.Request["data"]; 9 Image img = this.Base64ToImage(base64String); 10 var name = DateTime.Now.ToString("yyyyMMddhhmmss")+".jpg"; 11 img.Save(@"D:\VS2010\Myproject\Project\最新\ComPublishWeb\ComPublishWeb\PhotoUpload\" + name);//储存图片 12 affairsdata.Dataname = name; 13 affairsdata.Url = "D:\\VS2010\\Myproject\\Project\\最新\\ComPublishWeb\\ComPublishWeb\\PhotoUpload\\" + name; 14 affairsdata.Uploadtime = DateTime.Now.ToString(); 15 affairsdata.Uploadernum = UserName; 16 affairsdata.AffairsID = affairsid; 17 rep.SavePhotoUpload(affairsdata); 18 return "上传成功！"; 19 } 20 21 //把base64字符串转成Image对象 22 public Image Base64ToImage(string base64String) 23 { 24 // Convert Base64 String to byte[] 25 byte[] imageBytes = Convert.FromBase64String(base64String); 26 MemoryStream ms = new MemoryStream(imageBytes, 0, 27 imageBytes.Length); 28 29 // Convert byte[] to Image 30 ms.Write(imageBytes, 0, imageBytes.Length); 31 Image image = Image.FromStream(ms, true); 32 return image; 33 }
三.Models:
1 public void SavePhotoUpload(AffairsDataModel data) 2 { 3 AffairsMSLinqDataContext db = new AffairsMSLinqDataContext(); 4 AffairsData affairsdata = new AffairsData(); 5 affairsdata.dataname = data.Dataname; 6 affairsdata.url = data.Url; 7 affairsdata.uploadernum = data.Uploadernum; 8 affairsdata.uploadtime = DateTime.Parse(data.Uploadtime); 9 affairsdata.affairsID = data.AffairsID; 10 db.AffairsData.InsertOnSubmit(affairsdata); 11 db.SubmitChanges(); 12 return; 13 }
大致的过程就是这样了，如果有什么不懂得，欢迎交流。
