html代码

  1.  <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
  2.  <%@ include file="/includes/ctx.jsp" %>
  3.  <!DOCTYPE html>
  4.  <html>
  5.  <head>
  6.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7.  <title>webcam</title>
  8.      <script type="text/javascript" src="${ctx}/js/jquery-1.11.2.js"></script>
  9.      <script type="text/javascript">
  10.       window.onload = function (){
  11.           try{
  12.               //动态创建一个canvas元 ，并获取他2Dcontext。如果出现异常则表示不支持
  13.               document.createElement("canvas").getContext("2d");
  14.               document.getElementById("support").innerHTML = "浏览器支持HTML5 CANVAS";
  15.           }catch(e){
  16.               document.getElementById("support").innerHTML = "浏览器不支持HTML5 CANVAS";
  17.           }
  18.       };
  19.  
  20.       //这段代 主要是获取摄像头的视频流并显示在Video 签中
  21.       window.addEventListener("DOMContentLoaded", function () {
  22.           var video = document.getElementById("video");
  23.           var videoObj = { "video": true };
  24.           var errBack = function (error){
  25.                   console.log("Video capture error: " + error.message, error.code);
  26.               };
  27.           //  支持浏览器  谷歌,火狐,360,欧朋
  28.           //navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow
  29.           if (navigator.getUserMedia) {
  30.               navigator.getUserMedia(videoObj, function (stream) {
  31.                   video.src = stream;
  32.                   video.play();
  33.               }, errBack);
  34.           } else if (navigator.webkitGetUserMedia) {
  35.               navigator.webkitGetUserMedia(videoObj, function (stream) {
  36.                   video.src = window.URL.createObjectURL(stream);
  37.                   video.play();
  38.               }, errBack);
  39.           } else if (navigator.mozGetUserMedia){
  40.               navigator.mozGetUserMedia(videoObj, function (stream) {
  41.                        video.src = window.URL.createObjectURL(stream);
  42.                       video.play();
  43.               }, errBack);
  44.           }
  45.  
  46.           //这个是拍照按钮的事件，
  47.           document.getElementById("snap").addEventListener("click",function(){
  48.                   CatchCode();
  49.           });
  50.       }, false);
  51.       //定时器
  52.       //var interval = setInterval(CatchCode, "300");
  53.       //这个是 刷新上 图像的
  54.       function CatchCode() {
  55.           //实际运用可不写，测试代 ， 为单击拍照按钮就获取了当前图像，有其他用途
  56.           var canvans = document.getElementById("canvas");
  57.           var video = document.getElementById("video");
  58.           var context = canvas.getContext("2d");
  59.  
  60.           canvas.width = video.videoWidth;
  61.           canvas.height = video.videoHeight;
  62.           context.drawImage(video,0,0);
  63.  
  64.           //获取浏览器页面的画布对象
  65.           //以下开始编 数据
  66.           var imgData = canvans.toDataURL("image/jpg");
  67.           //将图像转换为base64数据
  68.           var base64Data = imgData.split(",")[1];
  69.  
  70.           var xhr = new XMLHttpRequest();
  71.           xhr.open("post", "${ctx}/webcam.do", true);
  72.           //告诉服务器是以个Ajax 请求
  73.           xhr.setRequestHeader("X-Requested-Width", "XMLHttpRequest");
  74.           var fd = new FormData();
  75.           fd.append("doc",base64Data);
  76.           xhr.send(fd);
  77.  
  78.           //alert(base64Data);
  79.  
  80.           //在前端截取22位之后的字符串作为图像数据
  81.           //开始异步上
  82.       }
  83.      </script>
  84.  </head>
  85.      <body>
  86.          <div id="support"></div>
  87.          <div id="contentHolder">
  88.              <video id="video" width="160" height="120" style="border:1px solid red" autoplay></video>
  89.              <button id="snap"> 拍照</button>
  90.              <canvas style="border:1px solid red" id="canvas"></canvas>
  91.          </div>
  92.      </body>
  93.  </html>

后台代码

  1.  package com.servlet;
  2.  
  3.  import java.io.File;
  4.  import java.io.FileOutputStream;
  5.  import java.io.IOException;
  6.  import java.io.InputStream;
  7.  import java.io.OutputStream;
  8.  import java.util.Date;
  9.  import java.util.List;
  10.  
  11.  import javax.servlet.ServletException;
  12.  import javax.servlet.http.HttpServlet;
  13.  import javax.servlet.http.HttpServletRequest;
  14.  import javax.servlet.http.HttpServletResponse;
  15.  
  16.  import org.apache.commons.fileupload.FileItem;
  17.  import org.apache.commons.fileupload.FileUploadException;
  18.  import org.apache.commons.fileupload.disk.DiskFileItemFactory;
  19.  import org.apache.commons.fileupload.servlet.ServletFileUpload;
  20.  
  21.  import sun.misc.BASE64Decoder;
  22.  
  23.  /**
  24.   * Servlet implementation class webcam
  25.   */
  26.  public class webcam extends HttpServlet {
  27.      private static final long serialVersionUID = 1L;
  28.  
  29.      /**
  30.       * @see HttpServlet#HttpServlet()
  31.       */
  32.      public webcam() {
  33.          super();
  34.          // TODO Auto-generated constructor stub
  35.      }
  36.  
  37.      /**
  38.       * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
  39.       *      response)
  40.       */
  41.      protected void doGet(HttpServletRequest request,
  42.              HttpServletResponse response) throws ServletException, IOException {
  43.          // TODO Auto-generated method stub
  44.          doPost(request, response);
  45.      }
  46.  
  47.      /**
  48.       * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
  49.       *      response)
  50.       */
  51.      protected void doPost(HttpServletRequest request,
  52.              HttpServletResponse response) throws ServletException, IOException {
  53.          request.setCharacterEncoding("utf-8");
  54.          response.setCharacterEncoding("utf-8");
  55.          response.setContentType("text/html;char=utf-8");
  56.  
  57.          // 获得磁盘文件条目工厂
  58.          DiskFileItemFactory factory = new DiskFileItemFactory();
  59.          // 获取文件需要上传到的路径
  60.          // String path = request.getRealPath("/upload");
  61.          String path = "d:/shangchuan/";
  62.  
  63.          // 如果文件夹不存在 将创建文件夹
  64.          if (!new File(path).exists()) {
  65.              new File(path).mkdirs();
  66.          }
  67.  
  68.          // 如果没以下两行设置的话，上传大的 文件 会占用 很多内存，
  69.          // 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同
  70.          /**
  71.           * 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem
  72.           * 格式的 然后再将其真正写到 对应目录的硬盘上
  73.           */
  74.          factory.setRepository(new File(path));
  75.          // 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
  76.          factory.setSizeThreshold(1024 * 1024);
  77.  
  78.          // 高水平的API文件上传处理
  79.          ServletFileUpload upload = new ServletFileUpload(factory);
  80.  
  81.          try {
  82.              // 可以上传多个文件
  83.              List<FileItem> list = (List<FileItem>) upload.parseRequest(request);
  84.  
  85.              for (FileItem item : list) {
  86.                  // 获取表单的属性名字
  87.                  String name = item.getFieldName();
  88.  
  89.                  // 如果获取的 表单信息是普通的 文本 信息
  90.                  if (item.isFormField()) {
  91.                      // 获取用户具体输入的字符串 ，名字起得挺好，因为表单提交过来的是 字符串类型的
  92.                      String imgStr = item.getString();
  93.  
  94.                      // base64解码并生成图片
  95.                      BASE64Decoder decoder = new BASE64Decoder();
  96.                      try {
  97.                          // Base64解码
  98.                          byte[] bytes = decoder.decodeBuffer(imgStr);
  99.  //                        for (int i = 0; i < bytes.length; ++i) {
  100.  //                            if (bytes[i] < 0) {// 调整异常数据
  101.  //                                bytes[i] += 256;
  102.  //                            }
  103.  //                        }
  104.                          // 生成jpeg图片
  105.                          OutputStream out = new FileOutputStream("d:/ceshi.jpg");
  106.                          out.write(bytes);
  107.                          out.flush();
  108.                          out.close();
  109.                      } catch (Exception e) {
  110.                          e.printStackTrace();
  111.                      }
  112.                      // request.setAttribute(name, value);
  113.                  }else {
  114.                      // 对传入的非 简单的字符串进行处理 ，比如说二进制的 图片，电影这些
  115.                      /**
  116.                       * 以下三步，主要获取 上传文件的名字
  117.                       */
  118.                      // 获取路径名
  119.                      String value = item.getName();
  120.                      // 索引到最后一个反斜杠
  121.                      int start = value.lastIndexOf("\\");
  122.                      // 截取 上传文件的 字符串名字，加1是 去掉反斜杠，
  123.                      String filename = value.substring(start + 1);
  124.                      // 将当前时间戳 作为的文件名
  125.                      String newfilename = Long.toString(new Date().getTime())
  126.                              + filename.substring(filename.indexOf('.'));
  127.                      request.setAttribute(name, newfilename);
  128.  
  129.                      // 真正写到磁盘上
  130.                      // 它抛出的异常 用exception 捕捉
  131.  
  132.                      // item.write( new File(path,filename) );//第三方提供的
  133.  
  134.                      // 手动写的
  135.                      OutputStream out = new FileOutputStream(new File(path,
  136.                              newfilename));
  137.  
  138.                      InputStream in = item.getInputStream();
  139.  
  140.                      int length = 0;
  141.                      byte[] buf = new byte[1024];
  142.  
  143.                      System.out.println("获取上传文件的总共的容量：" + item.getSize());
  144.  
  145.                      // in.read(buf) 每次读到的数据存放在 buf 数组中
  146.                      while ((length = in.read(buf)) != -1) {
  147.                          // 在 buf 数组中 取出数据 写到 （输出流）磁盘上
  148.                          out.write(buf, 0, length);
  149.                      }
  150.                      in.close();
  151.                      out.close();
  152.                  }
  153.              }
  154.  
  155.          } catch (FileUploadException e) {
  156.              // TODO Auto-generated catch block
  157.              e.printStackTrace();
  158.          } catch (Exception e) {
  159.              // TODO Auto-generated catch block
  160.              e.printStackTrace();
  161.          }
  162.      }
  163.  }

HTML打开摄像头，进行拍照上传的更多相关文章

  1. JS打开摄像头并截图上传

    直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用dra ...

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

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

  3. 【Demo】HTML5 拍照上传

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

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

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

  5. android 拍照上传文件 原生定位

    最近公司需要一个android拍照上传和定位功能的的单一功能页面,一开始选择ionic cordova angular的一套H5框架,但是遇到和上传文件报错的问题,bug找了一天没找到原因,怀疑是io ...

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

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

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

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

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

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

  9. php实现视频拍照上传头像功能实例代码

    如果要在php中实现视频拍照我们需要借助于flash插件了,由flash拍出的确照片我们再通过php的$GLOBALS ['HTTP_RAW_POST_DATA']接受数据,然后保存成图片就可以了,下 ...

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

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

随机推荐

  1. SDUT 1225-编辑距离(串型dp)

    编辑距离 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 如果字符串的基本操作仅为:删除一个字符.插入一个字符和将一个字符改动 ...

  2. 《coredump问题原理探究》Linux x86版7.8节vector相关的iterator对象

    在前面看过了一个vectorcoredump的样例,接触了vector的iterator,能够知道vector的iterator仅仅有一个成员_M_current指向vector某一个元素. 先看一个 ...

  3. OpenCV+海康威视摄像头的实时读取

    OpenCV+海康威视摄像头的实时读取 本文由 @lonelyrains出品.转载请注明出处. 文章链接: http://blog.csdn.net/lonelyrains/article/detai ...

  4. Linux 下安装 jdk-7u79-linux-x64.gz，jdk1.7.0_79，jdk1.7步骤：

    1.首先下载对应CentOS版本的jdk:这里我下载的是jdk-7u79-linux-x64.tar.gz 2.上传到CentOS下的目录中 3.新建一个APP目录作为存储jdk的目录 4.解压jdk ...

  5. hdoj--1087--Super Jumping! Jumping! Jumping!（贪心）

    Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  6. Oracle 优化和性能调整

    分析评价Oracle数据库性能主要有数据库吞吐量.数据库用户响应时间两项指标.数据库用户响应时间又可以分为系统服务时间和用户等待时间两项,即:  数据库用户响应时间=系统服务时间+用户等待时间  因此 ...

  7. （转）用Lottie制作动画,我的月薪翻了一番!！

    Lottie是Airbnb发布的开源动画库. 帮助动效落地.学会使用Lottie,会极大地提高工作效率. Lottie是一种新的开发动画的方式. 学会使用Lottie,会极大改善你和开发小哥哥撕逼的情 ...

  8. Android开发：ImageView阴影和图层效果

    import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import  ...

  9. Web api 测试 工具WebApiTestClient

    1.打开Nuget  安装 WebApiTestClient 2.在HelpPageConfig.cs 里面添加这段文字 config.SetDocumentationProvider(new Xml ...

  10. 别让好想法埋没：如何进行APP开发？

    经常和许多创业者讨论,发现很多人想法都不错,但是都不知道该如何实现,今天就如何引导大家走出第一步写一篇文章,很多人通常误会一件事情,认为程序员开发可以一步步把自己的想法拼接出来,我有一个功能点,就让程 ...