HTML打开摄像头,进行拍照上传


 

html代码

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/includes/ctx.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>webcam</title>
    <script type="text/javascript" src="${ctx}/js/jquery-1.11.2.js"></script>
    <script type="text/javascript">
     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 video = document.getElementById("video");
         var videoObj = { "video": true };
         var errBack = function (error){
                 console.log("Video capture error: " + error.message, error.code);
             };
         //  支持浏览器  谷歌,火狐,360,欧朋
         //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.URL.createObjectURL(stream);
                 video.play();
             }, errBack);
         } else if (navigator.mozGetUserMedia){
             navigator.mozGetUserMedia(videoObj, function (stream) {
                      video.src = window.URL.createObjectURL(stream);
                     video.play();
             }, errBack);
         }
        
        
         //这个是拍照按钮的事件,
         document.getElementById("snap").addEventListener("click",function(){
                 CatchCode();
         });
     }, false);
     //定时器
     //var interval = setInterval(CatchCode, "300");
     //这个是 刷新上 图像的
     function CatchCode() {
         //实际运用可不写,测试代 , 为单击拍照按钮就获取了当前图像,有其他用途
         var canvans = document.getElementById("canvas");
         var video = document.getElementById("video");
         var context = canvas.getContext("2d");
         canvas.width = video.videoWidth;
         canvas.height = video.videoHeight;
         context.drawImage(video,0,0);
        
         //获取浏览器页面的画布对象
         //以下开始编 数据
         var imgData = canvans.toDataURL("image/jpg");
         //将图像转换为base64数据
         var base64Data = imgData.split(",")[1];
         var xhr = new XMLHttpRequest();
         xhr.open("post", "${ctx}/webcam.do", true);
         //告诉服务器是以个Ajax 请求
         xhr.setRequestHeader("X-Requested-Width", "XMLHttpRequest");
         var fd = new FormData();
         fd.append("doc",base64Data);
         xhr.send(fd);
         //alert(base64Data);
         //在前端截取22位之后的字符串作为图像数据
         //开始异步上
     }
    </script>
</head>
    <body>
        <div id="support"></div>
        <div id="contentHolder">      
            <video id="video" width="160" height="120" style="border:1px solid red" autoplay></video>      
            <button id="snap"> 拍照</button>       
            <canvas style="border:1px solid red" id="canvas"></canvas>
        </div>
    </body>
</html>

 

后台代码

 package com.servlet;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Date;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import sun.misc.BASE64Decoder;

/**
 * Servlet implementation class webcam
 */
public class webcam extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public webcam() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doPost(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;char=utf-8");

        // 获得磁盘文件条目工厂
        DiskFileItemFactory factory = new DiskFileItemFactory();
        // 获取文件需要上传到的路径
        // String path = request.getRealPath("/upload");
        String path = "d:/shangchuan/";

        // 如果文件夹不存在 将创建文件夹
        if (!new File(path).exists()) {
            new File(path).mkdirs();
        }

        // 如果没以下两行设置的话,上传大的 文件 会占用 很多内存,
        // 设置暂时存放的 存储室 , 这个存储室,可以和 最终存储文件 的目录不同
        /**
         * 原理 它是先存到 暂时存储室,然后在真正写到 对应目录的硬盘上, 按理来说 当上传一个文件时,其实是上传了两份,第一个是以 .tem
         * 格式的 然后再将其真正写到 对应目录的硬盘上
         */
        factory.setRepository(new File(path));
        // 设置 缓存的大小,当上传文件的容量超过该缓存时,直接放到 暂时存储室
        factory.setSizeThreshold(1024 * 1024);

        // 高水平的API文件上传处理
        ServletFileUpload upload = new ServletFileUpload(factory);

        try {
            // 可以上传多个文件
            List<FileItem> list = (List<FileItem>) upload.parseRequest(request);

            for (FileItem item : list) {
                // 获取表单的属性名字
                String name = item.getFieldName();

                // 如果获取的 表单信息是普通的 文本 信息
                if (item.isFormField()) {
                    // 获取用户具体输入的字符串 ,名字起得挺好,因为表单提交过来的是 字符串类型的
                    String imgStr = item.getString();

                    // base64解码并生成图片
                    BASE64Decoder decoder = new BASE64Decoder();
                    try {
                        // Base64解码
                        byte[] bytes = decoder.decodeBuffer(imgStr);
//                        for (int i = 0; i < bytes.length; ++i) {
//                            if (bytes[i] < 0) {// 调整异常数据
//                                bytes[i] += 256;
//                            }
//                        }
                        // 生成jpeg图片
                        OutputStream out = new FileOutputStream("d:/ceshi.jpg");
                        out.write(bytes);
                        out.flush();
                        out.close();
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                    // request.setAttribute(name, value);
                }else {
                    // 对传入的非 简单的字符串进行处理 ,比如说二进制的 图片,电影这些
                    /**
                     * 以下三步,主要获取 上传文件的名字
                     */
                    // 获取路径名
                    String value = item.getName();
                    // 索引到最后一个反斜杠
                    int start = value.lastIndexOf("\\");
                    // 截取 上传文件的 字符串名字,加1是 去掉反斜杠,
                    String filename = value.substring(start + 1);
                    // 将当前时间戳 作为的文件名
                    String newfilename = Long.toString(new Date().getTime())
                            + filename.substring(filename.indexOf('.'));
                    request.setAttribute(name, newfilename);

                    // 真正写到磁盘上
                    // 它抛出的异常 用exception 捕捉

                    // item.write( new File(path,filename) );//第三方提供的

                    // 手动写的
                    OutputStream out = new FileOutputStream(new File(path,
                            newfilename));

                    InputStream in = item.getInputStream();

                    int length = 0;
                    byte[] buf = new byte[1024];

                    System.out.println("获取上传文件的总共的容量:" + item.getSize());

                    // in.read(buf) 每次读到的数据存放在 buf 数组中
                    while ((length = in.read(buf)) != -1) {
                        // 在 buf 数组中 取出数据 写到 (输出流)磁盘上
                        out.write(buf, 0, length);
                    }
                    in.close();
                    out.close();
                }
            }

        } catch (FileUploadException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值