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

利用html5调用本地摄像头拍照上传图片

html5概念啥的就不废话了,不知道的 百度, 谷歌一堆。。今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头,在html5之前,要在浏览器获取本地摄像头只有通过插件(ActiveX,但是这种只有IE支持)或者是flash来获取(或许你没学过flash那就很坑爹了),在之后微软的silvertlight中也可以获取,但这些都比较麻烦,在html5的世界里,要获取本地摄像头,只要配合js就可以轻松获取。。

目前支持html5的浏览器(参考http://www.cnblogs.com/jerry_cong/archive/2011/05/15/2047143.html

先看看效果。。。(个人测试:使用谷歌Chrome 23.0.1271.97)

看看主要代码吧:

这个是前台HTML的代码。


1

2

3

4

5

<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)


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

<script>   

   //判断浏览器是否支持HTML5 Canvas   

       window.onload = function () {   

           try {   

               //动态创建一个canvas元素,并获取他2Dcontext。如果出现异常则表示不支持   

               document.createElement("canvas").getContext("2d");   

               document.getElementById("support").innerHTML = "浏览器支持HTML5 CANVAS";   

           }   

           catch (e) {   

               document.getElementById("support").innerHTML = "浏览器不支持HTML5 CANVAS";   

           }   

         

       };   

         

       //这段代码主要是获取摄像头的视频流并显示在Video标签中   

       window.addEventListener("DOMContentLoaded"function () {   

           var canvas = document.getElementById("canvas"),   

               context = canvas.getContext("2d"),   

               video = document.getElementById("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.getElementById("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编码之后的图像文件了。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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;   

        

      }   

            

  }

至此B/S通过本地摄像头拍照上传就完成了。HTML5的强大之处,爱不释手了。。。不在像以前需要写一堆烦人的东东了,而且你也可以不用去学flash...

额外说一句,如果您还在用IE6\IE7那您还是别玩html5了...

时间: 2024-11-05 11:37:54

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

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

关于H5 和 画布 调用本地摄像头拍照功能的实现 1.代码的实现(html部分) <input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();" /><br /> <video height="120px" autoplay="autoplay"></video>

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

今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在火的不行的html5,html5中的<video>标签,并将从摄像头获得视频作为这个标签的输入来源.实现拍照功能的html5代码: <article> <style scoped> video { transform: scaleX(-1); } p { text-alig

在chrome中,调用本地摄像头

原文地址:https://blog.csdn.net/journey191/article/details/40744015 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>HTML5 GetUserMedia Demo</title> <meta name="viewport" content=&qu

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

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5调用手机摄像头,仅仅支持OPPOHD浏览器</title> 6 <style> 7 #video { border: 1px solid #ccc; display:inline-block; } 8 #canvas

Firefox中利用javascript调用本地程序

http://blog.csdn.net/jensonhjt/article/details/1765557 script>function hello () {  netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  var file = Components.classes["@mozilla.org/file/local;1"].createInstance(

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

今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底,于是晚上回家开始网上各处找方案.以下是我对于H5扫描二维码以及调用本地摄像头的理解以及代码. 科普网址: H5如何生成安卓组件对象 H5调用安卓本地摄像头api 在线二维码图片生成器 二维码扫描:(使用的是mui的框架,下面是html代码) <!doctype html> <html>

利用html5的本地存储写的一个购物车

好久没有写博客园了,很多知识没有记录下来:可惜: 这几天在开发微信,也写了一个订餐平台的微网站,里面需要写一个购物车: 这里主要是把商品的部分信息以json格式保存在sessionstorage中,还有商店信息也是: 以json格式保存有什么好处呢,轻量级的传输,大概是这样吧!另外,如果我们把商品信息分开存储,就会导致有多条的sessionstorage项,那以后实现在两家商店同时购物的话,就不可能区分每家商店的商品了: 如果代码是自己写的,就有版权,这么说.对吧,是在软件工程师书上看到的: 不

利用html5的本地存储功能实现登录用户信息保存

在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了.二者用法完全相同,这里以localStorage为例. 用户名.密码保存,自动登录等,可以通过设置cookie实现,第一次登录网站后在本地计算机的中写入cookie,之后再次登录此网站查看cookie中现有的值,用cookie值进行网站登录即可.但是 cookie 不适合大量数据

利用html5 canvas实现纯前端上传图片的裁剪

今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的插件,但是有许多都是前端将图片的一些裁剪参数(如坐标)传给后台,有java程序员进行真正的图片裁剪.今天自己研究了一些,做了一个纯前端裁剪的demo,如下: 1.html部分:<div> <input type="file" id="imgFile"&